Upload files to 'public_html/scripts'

public_html/scripts/main.js

@@ -1,70 +1,265 @@
 /*  Authors         :   Carlos C. Corrada-Bravo
                         David J. Ortiz-Rivera
-                        José A. Quiñones-Flores
 
     Organization    :   Centro de Desarrollo y Consultoria Computacional
     Project         :   OPASO Material Registry   
     File            :   main.js
-    Description     :   Compile mainly used functions */
+    Description     :   Utility functions */
 
-/* current() - highlight current page in navbar */ 
-function current(){
-    var current = window.location.pathname;
-    $(".link").each(function(){
-        if($(this).attr("href") == current){
-            $(this).addClass("current");
+/* set listeners */ 
+$(document).ready(function(){
+    current();
+    $(".logout").click(log_out);
+    $(".clear-btn").click(clear_form);
+
+    /* search table */
+    $(".search-form").on("input",function(){
+        /* extract args */
+        let q = $(this).val();
+        $(".hide").removeClass("hide");
+
+        /* hide non matching strings */
+        if(is_valid(q)){
+            search(q);
+            $(".search-form-wrapper").addClass("active-form");
+        }
+
+        else{
+            $(".search-form-wrapper").removeClass("active-form");
+            $(".table-total").text(`Total: ${next}`)
+        }
+    });
+});
+
+/* clear_form() - reset search form */
+function clear_form(){
+    $(".search-form").val("");
+    $(".search-form-wrapper").removeClass("active-form");
+    $(".hide").removeClass("hide");
+    $(".table-total").text(`Total: ${next}`);
+}
+
+/* search(q: string) - search for string in table */
+function search(q){
+    var misses = 0;
+    $(".table-wrapper tbody tr").each(function(){
+        /* set matched flag */
+        var match = false;
+        var row = $(this).find("td");
+        
+        /* search row */
+        for(var c = 0; c < row.length - 1; c++){
+            if(row[c].textContent.toLowerCase().includes(q.toLowerCase())){
+                match = true;
+                break;
+            }
+        }
+
+        /* hide row */
+        if(!match){
+            $(this).addClass("hide");
+            misses += 1;
         }
     });
+
+    $(".table-total").text(`Total: ${next - misses}`);
 }
-/* get_arg(arg: string) - fetches argument from url if set, else returns null */ 
+
+/* current() - highlight current page in navbar */ 
+function current(){
+    let c = `.nav-link[href="${window.location.pathname}"]`;
+    $(c).addClass("current");
+}
+
+/* get_arg(arg) - fetches argument from url if set */ 
 function get_arg(arg){
-    /* Get arg by id */ 
-    var url = new URL(window.location.href);
-    arg = url.searchParams.get(arg);
-    return arg;
+    let url = new URL(window.location.href);
+    return url.searchParams.get(arg);
+}
+
+/* log_out() - destroy session and redirect to index */
+function log_out(){
+    $.post("/scripts/opaso",{query:11},function(data){
+        /* extract response */
+        let response = JSON.parse(data);
+        let status = response["status"];
+
+        /* handle by status */
+        switch(status){
+            case "success":             /* on success, redirect to index */
+                window.location.href = "/";
+                break;
+           
+            default:                    /* on error, do nothing */
+                break;
+        }
+    });
 }
-/* loading_screen(flag: bool) - hide/show loading screen */
-function loading_screen(flag){
-    if(flag){   /* show */
-        $(".content").css("overflow","hidden");
-        $(".loading-screen").show();
+
+/* is_valid(arg: string,type: string) - verify if arg is valid */
+function is_valid(arg,type){
+    /* null entries */
+    if(arg === null){
+        arg = "";
     }
-    else{       /* hide */
-        $(".loading-screen").hide();
-        $(".content").css("overflow","auto");
+
+    /* handle by type */
+    switch(type){
+        case "email":
+            var re = /^[a-zA-Z0-9_.+-]+@(upr)\.edu$/g;
+            return re.test(arg);
+
+        case "number":
+            return /^\d+$/.test(arg);
+
+        default:
+            return arg.trim().length > 0;
     }
 }
-/* create_button(text: string,icon: object,cname: string,id: string,val: string) - generates button */ 
-function create_button(text,icon,cname,id,val){
-    var button = document.createElement("button");
-    /* set attributes */ 
-    button.setAttribute("class",cname);
-    button.setAttribute("id",id);
-    if(is_defined(val)){
-        button.setAttribute("val",val);
-    }
-    /* set content */ 
-    button.textContent = text;
-    button.append(create_element("i",icon));
-    return  button;
+
+/* set_alert(type: string,message: string) - display alert */
+function set_alert(type,message){
+    /* set icon */
+    $(".message-icon").hide();
+    let icon = `.${type}-icon`;
+    $(icon).show();
+   
+    /* set alert */
+    $(".alert").addClass(type);
+    $(".alert-status").text(`Status: ${type}`);
+    $(".alert-message").text(`Message: ${message}`);
+
+    /* animate alert */
+    $(".alerts").addClass("slide-up");
+    hide_alert();
 }
-/* create_element(type: string,cname: string,content: string) - generates an html element */ 
-function create_element(type,cname,content){
+
+/* hide_alert() - hide and reset alert */
+function hide_alert(){
+    /* wait for animation */
+    setTimeout(function(){
+        $(".alerts").removeClass("slide-up");
+        setTimeout(function(){
+            $(".message-icon").hide();
+            $(".alert-message").text("");
+            $(".alert").attr("class","alert");
+        },500);
+    },5000);
+
+    return false;
+}
+
+/* element_gen(type: string,attributes: object) - generates an html element */ 
+function element_gen(type,attributes){
+    /* set attributes */
     var element = document.createElement(type);
-    /* set class */ 
-    element.setAttribute("class",cname);
-    /* set content */
-    if(is_defined(content)){
-        element.textContent = content;
+    for(var a in attributes){
+        var attr = attributes[a];
+
+        /* handle by attribute */
+        switch(a){
+            case "text":
+                element.textContent = attr;
+                break;
+            
+            case "childs":
+                for(var child in attr){
+                    element.append(attr[child]);
+                }
+                break;
+
+            default:
+                element.setAttribute(a,attr);
+                break;
+        }
     }
     return element;
 }
-/* display_error(error: string) - display error to user */ 
-function display_error(message){
-    var error = create_element("div","error",message);
-    $(".main").html(error);
+
+/* link_gen() - generates navbar links with args */
+function link_gen(){
+    $(".arg-link").each(function(){
+        /* check for initial translation */ 
+        var lab_id = get_arg("lab_id");
+
+        try{
+            var link = new URL($(this).attr("href")); 
+        }
+
+        catch{
+            var link = new URL(window.location.origin + $(this).attr("href"));
+        }
+
+        link.searchParams.set("lab_id",lab_id);
+        $(this).attr("href",link);
+    });
+}
+
+/* set_confirm(message: string,query: string) - configure alert */
+function set_confirm(message,query){
+    $(".confirm-message").text(message);
+    $("#yes").attr("value",query);
+    $(".alert-wrapper").addClass("quick-fade-in");
+}
+
+/* hide_confirm() - reset alert */
+function hide_confirm(){
+    $(".alert-wrapper").removeClass("quick-fade-in");              
+    $(".message").text("");
 }
+
 /* is_defined(arg: any) - return true if an argument is defined */
 function is_defined(arg){
-    return typeof arg != undefined;
-} 
+    return arg !== undefined;
+}
+
+/* full_sort(size: int,sort_key: string) - sort table; O(n^2) */
+function full_sort(size,sort_key){
+    var m_selector = `td[value=${sort_key}]`;
+    for(var i = 0; i < size; i++){
+        var min = `#${i}`;
+        var min_key = $(min).find(m_selector).text();
+        
+        if(sort_key == "total"){
+            min_key = parseFloat(min_key);
+        }
+        
+        else{
+            min_key = min_key.toLowerCase();
+        }
+        
+        var min_cap = parseFloat($(min).find("td[value=capacity]").text());
+        var min_idx = i;
+
+        /* find min candidate */
+        for(var j = i; j < size; j++){
+            var candidate = `#${j}`;
+            var c_key = $(candidate).find(m_selector).text();
+
+            if(sort_key == "total"){
+                c_key = parseFloat(c_key);
+            }
+
+            else{
+                c_key = c_key.toLowerCase();
+            }
+
+            var c_cap = parseFloat($(candidate).find("td[value=capacity]").text());
+            if(min_key > c_key){
+                min_idx = j;
+                min = candidate;
+                min_key = c_key;
+                min_cap = c_cap;
+            }
+        }
+        
+        /* switch */
+        $(min).insertBefore($(`#${i}`));
+        $(`#${i}`).insertAfter($(`#${min_idx-1}`)); 
+
+        /* swap ids */
+        var id = $(min).attr("id");
+        $(`#${i}`).attr("id",id);
+        $(min).attr("id",i);
+    }
+}

public_html/scripts/manage-laboratories.js

@@ -0,0 +1,410 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   manage-laboratories.js
+    Description     :   Generate lab table */
+
+/* global values */
+var auth = {};
+var access_levels = {};
+var form_timeout;
+var current_person_id;
+var next;
+var current_lab_id;
+var r;
+var sort_key = "lab_room";
+
+/* set listeners when document is ready */ 
+$(document).ready(fetch_personnel);
+
+/* display_form(type: string,transaction: string) - configure/display form  */
+function display_form(type,transaction){
+    let form = `.${type}-form`;
+    let submit = `#${type}-submit`;
+    $(".form-shader").addClass("fade-in");
+    $(form).addClass("c-form");
+    $(form).addClass("slide-down");
+    $(submit).attr("value",transaction);
+}
+
+/* hideForm(clear: bool) - hide/clear form  */
+function hide_form(clear){
+    $(".c-form").removeClass("slide-down");
+    $(".c-form").removeClass("c-form");
+
+    /* wait for animation */
+    setTimeout(function(){
+        $(".form-shader").removeClass("fade-in");
+        $(".laboratories").html("");
+        if(clear){
+            $(".ap-field").val("");
+        }
+    },250);
+    return false;
+}
+
+/* action() - display laboratory form */
+function action(){
+    /* extract args */
+    let action = $(this).attr("id");
+    r = $(this).parent().parent().attr("id");
+    let s = `#${r}`;
+    let pi = $(s).find("td[value=pi]").attr("person_id");
+    current_lab_id = $(s).find("td[value=lab_room]").attr("lab_id");
+
+    /* populate form */
+    if(action === "edit"){
+        $(".form .ap-field").each(function(){
+            $(this).val($(s).find(`td[value=${$(this).attr("id")}]`).text());
+        });
+
+        /* set pi */
+        $(".main-pi").val(pi);
+    }
+
+    display_form("main",action);
+}
+
+/* edit_lab() - update lab */
+function edit_lab(){
+    let pi = $(".main-pi").val();
+    let lab_name = $("#lab_name").val();
+    let lab_room = $("#lab_room").val();
+    let building = $("#building").val();
+    var extension = $("#extension").val();
+    let department = $("#department").val();
+    let person_name = $(".main-pi option:selected").text();
+
+    /* validate input */
+    if(is_valid(lab_room) && is_valid(lab_name) && is_valid(department) && is_valid(building) && is_valid(pi,"number")){
+        /* validate phone number */
+        if(!is_valid(extension,"number")){
+            extension = "n/a";
+        }
+
+        /* reset fields */
+        $(".invalid-feedback").hide();
+        $(".required").removeClass("invalid");
+        
+        /* update lab */
+        $.post("/scripts/opaso",{query: 18,lab_id: current_lab_id,lab_name: lab_name,lab_room: lab_room,department: department,building: building,extension: extension,pi: pi},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "expired":                  /* on expired, redirect to index */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+               case "success":                  /* on success, update lab */
+                    let s = `#${r}`;
+
+                    // console.log(r,s);
+                    let lab = {lab_name: lab_name,department: department,building: building,extension: extension};
+                    $(s).find("td[value=pi]").text(person_name);
+                    $(s).find("td[value=pi]").attr("person_id",pi);
+                    $(s).find("td[value=lab_room]").find(".lab-link").text(lab_room);
+
+                    /* update entries */
+                    for(var field in lab){
+                        // console.log($(s).find(`td[value=${field}]`).text());
+                        $(s).find(`td[value=${field}]`).text(lab[field]);
+                    }
+
+                    /* sort table */
+                    full_sort(next,sort_key);
+                    hide_form();
+
+                default:                        /* on success/error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    }
+
+    /* invalid user info */ 
+    else{
+        $(".main-required").each(function(){
+            var id = $(this).attr("id");
+            var s = `.${id}`;
+            
+            /* highlight */
+            if(!is_valid($(this).val(),id)){
+                $(this).addClass("invalid");
+                $(s).show();
+            }
+
+            /* unhighlight */
+            else{
+                $(this).removeClass("invalid");
+                $(s).hide();
+            }
+        });
+
+        /* display alert */
+        set_alert("warning","Please correct highlighted fields");
+    }
+}
+
+/* add_laboratory() - validate input and add laboratory */
+function add_laboratory(){
+    /* extract args */
+    let pi = $(".add-pi").val();
+    let lab_name = $("#add_lab_name").val();
+    let lab_room = $("#add_lab_room").val();
+    let building = $("#add_building").val();
+    var extension = $("#add_extension").val();
+    let department = $("#add_department").val();
+    let person_name = $(".add-pi option:selected").text();
+
+    /* validate input */
+    if(is_valid(lab_room) && is_valid(lab_name) && is_valid(department) && is_valid(building) && is_valid(pi,"number")){
+        /* validate phone number */
+        if(!is_valid(extension,"number")){
+            extension = "n/a";
+        }
+
+        /* reset fields */
+        $(".invalid-feedback").hide();
+        $(".required").removeClass("invalid");
+        
+        $.post("/scripts/opaso",{query: 14,lab_name: lab_name,lab_room: lab_room,department: department,building: building,extension: extension,pi: pi},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "expired":                  /* on expired, redirect */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+               case "success":                  /* on success, generate lab row */
+                    let lab_id = response["lab_id"];
+                    let lab = {lab_room: lab_room,lab_name: lab_name,department: department,building: building,extension: extension,person_name: person_name};
+
+                    /* generate lab row */
+                    let tr = element_gen("tr",{class: "lab-row",id: next});
+                    for(var field in lab){
+                        if(field === "lab_room"){
+                            var href = `/laboratory?lab_id=${lab_id}`;
+                            var link = element_gen("a",{class: "lab-link",href: href,target: "_blank",rel: "noopener noreferrer",text: lab[field]});
+                            var td = element_gen("td",{class: "lab-cell",lab_id: lab_id,value: "lab_room",childs: {link}});
+                        }
+
+                        else if(field === "person_name"){
+                            var td = element_gen("td",{class: "lab-cell",value: "pi",person_id: pi,text: lab[field]});
+                        }
+
+                        else{
+                            var td = element_gen("td",{class: "lab-cell",value: field,text: lab[field]});
+                        }
+
+                        tr.append(td);
+                    }
+
+                    /* generate actions */
+                    let actions = {edit:{class: "t-icon material-icons",icon: "notes"}};
+                    var actions_cell = element_gen("td",{class: "actions-cell"});
+                    for(var action in actions){
+                        var icon = element_gen("i",{class: actions[action]["class"],text: actions[action]["icon"]});
+                        var button = element_gen("button",{class: "button action",id: action,value: action,title: action,childs: {icon}});
+                        actions_cell.append(button);
+                    }
+
+                    /* append */
+                    tr.append(actions_cell);
+                    $("tbody").append(tr);
+
+                    /* sort table */
+                    next += 1;
+                    full_sort(next,sort_key);
+                    $(".table-total").text(`Total: ${next}`);
+                    hide_form(true);
+
+                default:                        /* on success/error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    }
+
+    /* invalid user info */ 
+    else{
+        $(".required").each(function(){
+            var id = $(this).attr("id");
+            var s = `.${id}`;
+            
+            /* highlight */
+            if(!is_valid($(this).val(),id)){
+                $(this).addClass("invalid");
+                $(s).show();
+            }
+
+            /* highlight */
+            else{
+                $(this).removeClass("invalid");
+                $(s).hide();
+            }
+        });
+
+        /* display alert */
+        set_alert("warning","Please correct highlighted fields");
+    }
+}
+
+/* set_listeners() - listen for events */
+function set_listeners(){
+    /* sorts table */
+    $(".sort").click(function(){
+        sort_key = $(this).attr("value");
+
+        if(sort_key === "lab_room"){
+            $(".sort-primary").show();
+            $(".sort-alt").hide();
+        }
+
+        else{
+            $(".sort-alt").show();
+            $(".sort-primary").hide();
+        }
+
+        full_sort(next,sort_key);
+    });
+    /* register user */
+    $("#main-submit").click(edit_lab);
+
+    /* register user */
+    $("#add-submit").click(add_laboratory);
+
+    /* handle actions */
+    $("tbody").on("click",".action",action);
+    
+    /* add material to inventory */
+    $("#add").click(function(){
+        display_form("add","add-material");
+    });
+
+    /* close form */ 
+    $(".close-form").click(function(e){
+        if(e.target === e.currentTarget){
+            hide_form(false);
+        }
+    });
+}
+
+/* table_gen(personnel: dictionary) - generate table body */
+function table_gen(data){
+    for(var d in data){
+        /* generate lab row */
+        let tr = element_gen("tr",{class: "lab-row",id: d});
+        for(var field in data[d]){
+            if(field === "lab"){
+                var href = `/laboratory?lab_id=${data[d][field]["lab_id"]}`;
+                var link = element_gen("a",{class: "lab-link",href: href,target: "_blank",rel: "noopener noreferrer",text: data[d][field]["lab_room"]});
+                var td = element_gen("td",{class: "lab-cell",lab_id: data[d][field]["lab_id"],value: "lab_room",childs: {link}});
+            }
+
+            else if(field === "pi"){
+                var td = element_gen("td",{class: "lab-cell",value: field,person_id: data[d][field]["person_id"],text: data[d][field]["person_name"]});
+            }
+
+            else{
+                /* correct null entries */
+                if(!data[d][field]){
+                    data[d][field] = "-";
+                }
+
+                var td = element_gen("td",{class: "lab-cell",value: field,text: data[d][field]});
+            }
+
+            tr.append(td);
+        }
+
+        /* generate actions */
+        let actions = {edit:{class: "t-icon material-icons",icon: "notes"}};
+        var actions_cell = element_gen("td",{class: "actions-cell"});
+        for(var action in actions){
+            var icon = element_gen("i",{class: actions[action]["class"],text: actions[action]["icon"]});
+            var button = element_gen("button",{class: "button action",id: action,value: action,title: action,childs: {icon}});
+            actions_cell.append(button);
+        }
+
+        /* append */
+        tr.append(actions_cell);
+        $("tbody").append(tr);
+    }
+
+    $(".processing").hide();
+    setTimeout(function(){
+        set_listeners();
+        $(".main-wrapper").show();
+    },250);
+}
+
+/* fetch_personnel() - generate select menu for pi's */
+function fetch_labs(){
+    /* query server */
+    $.post("/scripts/opaso",{query: 17},function(data){
+        // console.log(data);
+        /* extract args */
+        let response = JSON.parse(data);
+        let status = response["status"];
+
+        /* handle by status */
+        switch(status){
+            case "success":                 /* on success, generate select */
+                /* generate lab table */
+                let labs = response["laboratories"];
+                next = Object.keys(labs).length;
+                table_gen(labs);
+                $(".table-total").text(`Total: ${next}`);
+                break;
+
+            case "expired":                  /* on expired, redirect to index */
+                window.location.href = "/?error=session_expired";
+                break;
+
+            default:                        /* on error, display message */
+                set_alert(status,response["message"]);
+                break;
+        }
+    });
+}
+
+/* fetch_personnel() - generate select menu for pi's */
+function fetch_personnel(){
+    $.post("/scripts/opaso",{query: 13},function(data){
+        // console.log(data);
+        /* extract response */
+        let response = JSON.parse(data);
+        let status = response["status"];
+
+        /* handle by status */
+        switch(status){
+            case "success":                 /* on success, generate select */
+                let personnel = response["personnel"];
+                for(var person in personnel){
+                    var option = element_gen("option",{class: "option",text: personnel[person]["person_name"],value: personnel[person]["person_id"]});
+                    $(".pi").append(option);
+                }
+
+                fetch_labs();
+                break;
+
+            case "expired":                  /* on expired, redirect to index */
+                window.location.href = "/?error=session_expired";
+                break;
+
+            default:                        /* on error, display message */
+                set_alert(status,response["message"]);
+                break;
+        }
+    });
+}

public_html/scripts/manage-personnel.js

@@ -0,0 +1,430 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   manage-personnel.js
+    Description     :   Generate personnel table */
+
+/* global values */
+var auth = {};
+var labs = {};
+var access_levels = {};
+var current_person_id;
+var next;
+var current_lab_id;
+
+/* set listeners when document is ready */ 
+$(document).ready(fetch_personnel);
+
+/* display_form(type: string,transaction: string) - configure/display form  */
+function display_form(type,transaction){
+    let form = `.${type}-form`;
+    let submit = `#${type}-submit`;
+    $(".form-shader").addClass("fade-in");
+    $(form).addClass("c-form");
+    $(form).addClass("slide-down");
+    $(submit).attr("value",transaction);
+}
+
+/* hideForm(clear: bool) - hide/clear form  */
+function hide_form(clear){
+    $(".c-form").removeClass("slide-down");
+    $(".c-form").removeClass("c-form");
+
+    /* wait for animation */
+    setTimeout(function(){
+        $(".form-shader").removeClass("fade-in");
+        $(".laboratories").html("");
+        if(clear){
+            $(".ap-field").val("");
+        }
+    },250);
+    return false;
+}
+
+/* fetch_access_level(action) - extract user's acess level for lab */
+function fetch_access_level(action){
+    /* extract access level */
+    let lab_id = $(".laboratories").val();
+    if(current_person_id in access_levels){
+        if(lab_id in access_levels[current_person_id]){
+            var access_level = access_levels[current_person_id][lab_id]["access_level"];
+        }
+
+        else{
+            var access_level = "none";
+        }
+    }
+
+    else{
+        var access_level = "none";
+    }
+
+
+    /* restrict options */
+    if(action === "restrict" && access_level === "technician"){
+        $("option[value=investigator]").attr("disabled",true);
+    }
+
+    else{
+        $("option[value=investigator]").attr("disabled",false);
+    }
+
+    if(action === "authorize" && access_level === "investigator"){
+        $("option[value=technician]").attr("disabled",true);
+    }
+    
+    else{
+        $("option[value=technician]").attr("disabled",false);
+    }
+
+    $(".access_level").val(access_level);
+}
+
+/* action - handle material transactions */
+function action(){
+    /* extract args */
+    let action = $(this).attr("value");
+    let r = $(this).parent().parent().attr("id");
+    let s = `#${r}`;
+    var restrict = true;
+    let name = $(s).find("td[value=person_name]").text();
+    current_person_id = $(s).find("td[value=person_name]").attr("person_id");
+
+    /* set user info */
+    $(".person").text(name);
+    $(".main-header").text(`${action} user`);
+
+    /* authorize */
+    if(action === "authorize"){
+        for(var lab in labs){
+            var option = element_gen("option",{class: "option",text: labs[lab]["lab_room"],value: labs[lab]["lab_id"]});
+            $(".laboratories").append(option);
+        }
+
+        $("option[value=none]").attr("disabled",true);
+    }
+
+    /* restrict */
+    else{
+        if(current_person_id in access_levels){
+            var access_level = access_levels[current_person_id];
+            for(var l in labs){
+                for(var lab_id in access_level){
+                    if(labs[l]["lab_id"] == lab_id){
+                        var option = element_gen("option",{class: "option",text: access_level[lab_id]["lab_room"],value: lab_id});
+                        $(".laboratories").append(option);
+                        break;
+                    }
+                }
+            }
+        }
+
+        /* no authorized labs */
+        else{
+            restrict = false;
+        }
+
+        $("option[value=none]").attr("disabled",false);
+    }
+
+    /* user is being authorized/has authorized labs */
+    if(restrict){
+        fetch_access_level(action);
+        display_form("main",action);
+    }
+
+    else{
+        set_alert("warning","No authorized labs found");
+    }
+}
+
+/* manage_personnel() - authorize/restrict labs for a user */
+function manage_personnel(){
+    let action = $(this).attr("value");
+    let access_level = $(".access_level").val();
+    current_lab_id = $(".laboratories").val();
+    let lab_room = $(".laboratories option:selected").text();
+
+    /* validate and submit */
+    if(is_valid(current_lab_id) && is_valid(access_level) && is_valid(action) && is_valid(current_person_id)){
+        $.post("/scripts/opaso",{query: 16,lab_id: current_lab_id,access_level: access_level,action: action,person_id: current_person_id},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "expired":                  /* on expired, redirect to index */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+                case "success":                 /* on success, update access level */
+                    /* determine authorized labs/highest access level */
+                    if(current_person_id in access_levels){
+                        var authorized = [];
+                        var highest_access_level = "technician";
+
+                        if(action === "restrict" && access_level === "none"){
+                            delete access_levels[current_person_id][current_lab_id];
+                        }
+
+                        else{
+                            access_levels[current_person_id][current_lab_id] = {lab_room: lab_room,access_level: access_level};
+                        }
+
+                        for(var lab_id in access_levels[current_person_id]){
+                            authorized.push(access_levels[current_person_id][lab_id]["lab_room"]);
+
+                            if(access_levels[current_person_id][lab_id]["access_level"] === "investigator"){
+                                highest_access_level = "investigator";
+                            }
+                        }
+
+                        if(!authorized.length){
+                            authorized = "-";
+                        }
+
+                        else{
+                            authorized = authorized.join(", ");
+                        }
+                    }
+
+                    /* no authorized labs */
+                    else{
+                        var authorized = lab_room;
+                        var highest_access_level = access_level;
+                        access_levels[current_person_id] = {};
+                        access_levels[current_person_id][current_lab_id] = {lab_room: lab_room,access_level: access_level};
+                    }
+                    
+                    $(`td[person_id=${current_person_id}]`).parent().find("td[value=authorized]").text(authorized);
+                    $(`td[person_id=${current_person_id}]`).parent().find("td[value=access_level]").text(highest_access_level);
+                    hide_form();
+
+                default:                        /* on success/error, display message */
+                    /* display alert */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    }
+
+    /* missing args */
+    else{
+        set_alert("error","One or more missing args");
+    }
+}
+
+/* set_listeners() - listen for events */
+function set_listeners(){
+
+    /* authorize/restrict access */
+    $("#main-submit").click(manage_personnel);
+
+    /* register user */
+    $("#add-submit").click(register_user);
+
+    /* fetch access level for lab */
+    $(".laboratories").change(function(){
+        let action = $("#main-submit").attr("value");
+        fetch_access_level(action);
+    });
+
+    /* handle actions */
+    $("tbody").on("click",".action",action);
+
+    /* add material to inventory */
+    $("#add").click(function(){
+        display_form("add","add-material");
+    });
+
+    /* close form */ 
+    $(".close-form").click(function(event){
+        if(event.target === event.currentTarget){
+            hide_form(false);
+        }
+    });
+}
+
+/* table_gen(data: dictionary) - generate table body */
+function table_gen(data){
+    for(var d in data){
+        /* generate person row */
+        let person_id = data[d]["person_id"];
+        let tr = element_gen("tr",{id: d});
+        let person = element_gen("td",{person_id: person_id,text: data[d]["person_name"],value: "person_name"});
+
+        /* determine authorized labs/highest access level */
+        var authorized = [];
+        let highest_access_level = "technician";
+        if(person_id in access_levels){
+            for(var lab_id in access_levels[person_id]){
+                authorized.push(access_levels[person_id][lab_id]["lab_room"]);
+
+                if(access_levels[person_id][lab_id]["access_level"] === "investigator"){
+                    highest_access_level = "investigator";
+                }
+            }
+        }
+
+        if(!authorized.length){
+            authorized = "-";
+        }
+
+        else{
+            authorized = authorized.join(", ");
+        }
+
+        let labs = element_gen("td",{text: authorized,value: "authorized"});
+        let access_level = element_gen("td",{text: highest_access_level,value: "access_level"});
+        tr.append(person,labs,access_level);
+        
+        /* generate actions */
+        let actions = {authorize:{class: "t-icon material-icons",icon: "add"},restrict: {class: "t-icon material-icons",icon: "remove"}};
+        var actions_cell = element_gen("td",{class: "actions-cell"});
+        for(var action in actions){
+            var icon = element_gen("i",{class: actions[action]["class"],text: actions[action]["icon"]});
+            var button = element_gen("button",{class: "button action",id: action,value: action,title: action,childs: {icon}});
+            actions_cell.append(button);
+        }
+
+        /* append */
+        tr.append(actions_cell);
+        $("tbody").append(tr);
+    }
+
+    $(".processing").hide();
+    setTimeout(function(){
+        set_listeners();
+        $(".main-wrapper").show();
+    },250);
+}
+
+/* fetch_personnel() - fetch personnel list */
+function fetch_personnel(){
+    $.post("/scripts/opaso",{query: 15},function(data){
+        // console.log(data);
+        /* extract reponse */
+        let response = JSON.parse(data);
+        let status = response["status"];
+
+        /* handle by status */
+        switch(status){
+            case "success":                 /* on success, generate table */
+                /* extract args */
+                let personnel = response["personnel"];
+                auth = response["authorized"];
+                access_levels = response["access_levels"];
+                labs = response["labs"];
+                next = Object.keys(personnel).length;
+                    
+                /* generate personnel table */
+                table_gen(personnel);
+                $(".table-total").text(`Total: ${next}`);
+                break;
+
+            case "expired":                  /* on expired, redirect to index */
+                window.location.href = "/?error=session_expired";
+                break;
+
+            default:                        /* on error, display message */
+                set_alert(status,response["message"]);
+                break;
+        }
+    });
+}
+
+/* register_user() - validate input and register user */
+function register_user(){
+    /* extract args */
+    let email = $("#email").val();
+    let person_name = $("#person_name").val();
+    var phone_number = $("#phone_number").val();
+
+    /* validate user data */
+    if(is_valid(person_name,"text") && is_valid(email,"email")){
+        /* validate phone number */
+        if(!is_valid(phone_number,"number")){
+            phone_number = "n/a"
+        }
+
+        /* reset fields */
+        $(".invalid-feedback").hide();
+        $(".invalid").removeClass("invalid");
+        
+        /* query server */
+        $.post("/scripts/opaso",{query: 0,person_name: person_name,email: email,phone_number: phone_number},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "expired":                  /* on expired, redirect to index */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+               case "success":                  /* on success, add user */
+                    /* extract person id */
+                    let person_id = response["person_id"];
+
+                    /* generate table row */
+                    let tr = element_gen("tr",{class: "personnel-row",id: next});
+                    let person = element_gen("td",{class: "personnell-cell",person_id: person_id,text: person_name,value: "person_name"});
+                    let labs = element_gen("td",{class: "personnell-cell",text: "-",value: "authorized"});
+                    let access_level = element_gen("td",{class: "personnell-cell",text: "technician",value: "access_level"});
+                    tr.append(person,labs,access_level);
+
+                    /* generate actions */
+                    let actions = {authorize:{class: "t-icon material-icons",icon: "add"},restrict: {class: "t-icon material-icons",icon: "remove"}};
+                    var actions_cell = element_gen("td",{class: "actions-cell"});
+                    for(var action in actions){
+                        var icon = element_gen("i",{class: actions[action]["class"],text: actions[action]["icon"]});
+                        var button = element_gen("button",{class: "button action",id: action,value: action,title: action,childs: {icon}});
+                        actions_cell.append(button);
+                    }
+
+                    /* append */
+                    tr.append(actions_cell);
+                    $("tbody").append(tr);
+
+                    /* sort */
+                    next += 1;
+                    full_sort(next,"person_name");
+                    $(".table-total").text(`Total: ${next}`);
+                    hide_form(true);
+
+                default:                        /* on success/error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    }
+
+    /* invalid user info */ 
+    else{
+        $(".required").each(function(){
+            /* extract id */
+            var id = $(this).attr("id");
+            var s = `.${id}`;
+            
+            /* highlight */
+            if(!is_valid($(this).val(),id)){
+                $(s).show();                
+                $(this).addClass("invalid");
+            }
+
+            /* unhighlight */
+            else{
+                $(s).hide();
+                $(this).removeClass("invalid");
+            }
+        });
+
+        set_alert("warning","Please correct highlighted fields");
+    }
+}

public_html/scripts/materials.js

@@ -1,5 +1,264 @@
-let user = "david.ortiz";
-let q = "all";
-$.post("/scripts/materials.php",{user:user,type:type},function(response){
-	console.log(response);
-});
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   materials.js
+    Description     :   Generate materials table */
+
+/* extract material id */
+let mat_id = get_arg("mat_id");
+var next = 0;
+
+/* fetch materials */ 
+$(document).ready(init_material);
+
+/* set_listeners() - listen for events */
+function set_listeners(){
+    /* sort table */
+    $(".sort").click(function(){
+        sort_key = $(this).attr("value");
+        if(sort_key === "mat_name"){
+            $(".sort-material").show();
+            $(".sort-alt").hide();
+        }
+        else{
+            $(".sort-alt").show();
+            $(".sort-material").hide();
+        }
+        full_sort(next,sort_key);
+    });
+
+    /* download report */
+    $(".download-option").click(function(){
+        /* generate file */
+        $("html").addClass("wait");
+        let download_type = $(this).attr("value");
+        $.post("/scripts/opaso",{query: 24,download_type: download_type},function(data){
+            // console.log(data);
+            /* extract args */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "success":                 /* on success, generate table */
+                    var link=element_gen("a",{href: response["url"],download: response["file_name"]});
+                    link.click();
+                    break;
+                
+                case "expired":                 /* on expired, redirect to index */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+                default:                        /* on error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+
+            $("html").removeClass("wait");
+        });
+    });
+
+    /* fetch material data */
+    $("td[value=mat_name]").click(function(){
+        let mat_id = $(this).attr("mat_id");
+        let mat_name = $(this).text();
+        
+        /* query server */
+        $.post("/scripts/opaso",{query: 21,mat_id: mat_id},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "success":                 /* on success, display material data */
+                    /* extract data */
+                    let details = response["details"];
+                    $(".material-data").html("");
+                    for(var d in details){
+                        var r = element_gen("div",{class: "material-data-row"});
+                        for(var a in details[d]){
+                            if(a === "lab"){
+                                let href = `/laboratory?lab_id=${details[d][a]["lab_id"]}`;
+                                let link = element_gen("a",{class: "lab-link",target: "_blank",rel: "noopener noreferrer",text: details[d][a]["lab_room"],href: href});
+                                let data = element_gen("h5",{class: "header material-data-header",childs: {link}});
+                                r.append(data);
+                            }
+
+                            else{
+                                if(!details[d][a]){
+                                    details[d][a] = "-";
+                                }
+                                let data_header = element_gen("h6",{class: "header material-data-sub-header",text: `${a}:`});
+                                let data = element_gen("span",{class: "material-data-text",text: details[d][a]});
+                                let w = element_gen("span",{class: "material-data-text-wrapper",childs: {data_header,data}});
+                                r.append(w);
+
+                            }
+                        }
+
+                        $(".material-name").text(mat_name);
+                        $(".material-data").append(r);
+                    }
+
+                    $(".material-data-shader").addClass("slide-right");
+                    break;
+                
+                case "expired":                 /* on expired, redirect */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+                default:                        /* on error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    });
+
+    /* close form */ 
+    $(".hide-material-data").click(function(event){
+        if(event.target === event.currentTarget){
+            $(".material-data-shader").removeClass("slide-right")
+        }
+    });
+}
+
+/* table_gen(data: dictionary,identifiers: dictionary) - generate table body */
+function table_gen(data,identifiers){
+    /* extract details */
+    for(var i in identifiers){
+        var mat_id = identifiers[i]["mat_id"];
+        let tr = element_gen("tr",{class: "material-row",id: i});
+
+        for(var field in data[mat_id]){
+
+            /* handle by field */
+            switch(field){
+                case "mat_name":
+                    var attr = {class: "material-cell",value: field,mat_id: mat_id,text: data[mat_id][field]};
+                    break;
+                
+                case "total":       
+                    var total = "";
+                    for(var uom in data[mat_id][field]){
+                        total += `${data[mat_id][field][uom]}${uom} / `;
+                    }
+                    var attr = {class: "material-cell",value: field,text: total.slice(0,-3)};
+                    break;
+
+                default:
+                    if(!data[mat_id][field]){
+                        data[mat_id][field] = "-";
+                    }
+                    var attr = {class: "material-cell",value: field,text: data[mat_id][field]};
+                    break;
+            }
+
+            var td = element_gen("td",attr);
+            tr.append(td);
+        }
+
+        $("tbody").append(tr);
+    }
+
+    $(".processing").hide();
+    setTimeout(function(){
+        set_listeners();
+        $(".main-wrapper").show();
+    },250);
+}
+
+/* fetch_materials(page: int) - fetch material details */ 
+function fetch_materials(page){
+    /* query server */
+    $.post("/scripts/opaso",{query: 19,page: page},function(data){
+        // console.log(data);
+        /* extract status */
+        response = JSON.parse(data);
+        status = response["status"];
+
+        /* handle by status */
+        switch(status){
+            case "success":                 /* on success, generate table */
+                /* extract args */
+                let materials = response["materials"];
+                let identifiers = response["identifiers"];
+                next = Object.keys(identifiers).length;
+                $(".table-total").text(`Total: ${next}`);
+                table_gen(materials,identifiers);
+                break;
+            
+            case "expired":                 /* on expired, redirect to index */
+                window.location.href = "/?error=session_expired";
+                break;
+
+            default:                        /* on error, display message */
+                /* display alert */
+                set_alert(status,response["message"]);
+                break;
+        }
+    });
+}
+
+/* init_material() - fetch material data */ 
+function init_material(){
+    /* material set */
+    if(is_valid(mat_id)){
+        $.post("/scripts/opaso",{query: 23,mat_id: mat_id},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "success":                 /* on success, generate table */
+                    /* extract args */
+                    let material = response["material"];
+                    let identifier = response["identifier"];
+                    next = Object.keys(identifier).length;
+                    $(".table-total").text(`Total: ${next}`);
+                    table_gen(material,identifier);
+                    break;
+                
+                case "expired":                 /* on expired, redirect to index */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+                default:                        /* on error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+
+    }
+    else{
+        $.post("/scripts/opaso",{query: 20},function(data){
+            // console.log(data);
+            /* extract response */
+            let response = JSON.parse(data);
+            let status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "success":                 /* on success, generate table */
+                    /* extract args */
+                    // let total = response["total"];
+                    // next = total;
+                    fetch_materials(0);
+                    break;
+                
+                case "expired":                 /* on expired, redirect to index */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+                default:                        /* on error, display message */
+                    set_alert(status,response["message"])
+                    break;
+            }
+        });
+    }
+}

public_html/scripts/menu.js

@@ -0,0 +1,61 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   menu.js
+    Description     :   Generate user menu */
+
+/* fetch authorized labs */ 
+$(document).ready(menu);
+
+/* menu() - generate user menu */
+function menu(){
+    /* query server */
+    $.post("/scripts/opaso",{query: 2},function(data){
+        // console.log(data);
+        /* extract response */
+        let response = JSON.parse(data);
+        let status = response["status"];
+
+        /* handle by status */
+        switch(status){
+            case "success":                 /* on success, generate menu */
+                /* extract authorized laboratories */
+                let auth = response["authorized"];
+                let r = element_gen("div",{class: "lab-row"});
+                
+                /* generate laboratory links */
+                for(var lab in auth){
+                    /* generate elements */
+                    let room = element_gen("div",{class: "lab-room",text: auth[lab]["lab_room"]});
+                    let p = `(${auth[lab]["access_level"].charAt()})`;
+                    let privileges = element_gen("p",{class: "privileges-indicator",text: p});
+
+                    /* set lab link */
+                    let href = `/laboratory?lab_id=${auth[lab]["lab_id"]}`;
+                    let link = element_gen("a",{class: "lab-link",href: href,childs:{room,privileges}});
+                    let w = element_gen("div",{class: "col-lg-3 laboratory-wrapper"});
+
+                    w.append(link);
+                    r.append(w);
+                }
+                $(".laboratories").append(r);
+
+                /* display menu */
+                $(".processing").hide();
+                setTimeout(function(){
+                    $(".main-wrapper").show();
+                },250);
+                break;
+
+            case "expired":                  /* on expired, redirect to index */
+                window.location.href = "/?error=session_expired";
+                break;
+
+            default:                        /* on error, display message */
+                set_alert(status,response["message"]);
+                break;
+        }
+    });
+}