Upload files to 'public_html/scripts'

public_html/scripts/hazards.js

@@ -0,0 +1,203 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   hazard.js
+    Description     :   Generate hazard menu/tables */
+
+/* global variables */
+var next = 0;
+
+/* fetch ghs codes */ 
+$(document).ready(fetch_ghs);
+
+/* 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_key}`).show();
+            $(".sort-material").hide();
+        }
+        full_sort(next,sort_key);
+    });
+
+    /* redirect to code page */
+    $(".ghs").click(function(){
+        let code = $(this).attr("value");
+        if(code){
+            window.location.href = `/hazards?ghs=${code}`;
+        }
+
+        /* display error */
+        else{
+            set_alert("error","GHS code not found")
+        }
+    });
+
+    /* download file */
+    $(".download-option").click(function(){
+        /* extract args */
+        $("html").addClass("wait");
+        let download_type = $(this).attr("value");
+
+        /* generate file */
+        $.post("/scripts/opaso",{query: 24,download_type: download_type,ghs: get_arg("ghs")},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 */
+                    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 */
+                    /* display alert */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+
+            $("html").removeClass("wait");
+        });
+    });
+}
+
+/* table_gen(ghs: object) - generate material table */
+function table_gen(ghs){
+    for(var g in ghs){
+        let tr = element_gen("tr",{id: g});
+        for(var field in ghs[g]){
+            switch(field){
+                case "material":                /* material, extract id */
+                    var link = element_gen("a",{class: "mat-link",text: ghs[g][field]["mat_name"],href: `materials?mat_id=${ghs[g][field]["mat_id"]}`,target: "_blank",rel: "noopener noreferrer"});
+                    var attrs = {value: "mat_name",mat_id: ghs[g][field]["mat_id"],childs: {link}};
+                    break;
+
+                case "manufacturer":            /* manufacturer, extract id */
+                    var attrs ={value: "man_name",man_id: ghs[g][field]["man_id"],text: ghs[g][field]["man_name"]};
+                    break;
+
+                case "laboratory":              /* laboratory, extract id */
+                    var link = element_gen("a",{class: "lab-link",text: ghs[g][field]["lab_room"],href: `laboratory?lab_id=${ghs[g][field]["lab_id"]}`,target: "_blank",rel: "noopener noreferrer"});
+                    var attrs = {value: "lab_room",lab_id: ghs[g][field]["lab_id"],childs: {link}};
+                    break;
+
+                case "sds":                     /* generate sds link */
+                    if(!ghs[g][field]){
+                        ghs[g][field] = "-";
+                    }
+                    var icon = element_gen("i",{class: "fas fa-link"});
+                    var link = element_gen("a",{href: decodeURI(ghs[g][field]),target: "_blank",rel: "noopener noreferrer",childs: {icon}});
+                    var attrs = {value: field,childs: {link}};
+                    break;
+
+                default:                        /* default */
+                    if(!ghs[g][field]){
+                        ghs[g][field] = "-";
+                    }
+                    var attrs = {value: field,text: ghs[g][field]};
+                    break;
+            }
+            
+            var td = element_gen("td",attrs);
+            tr.append(td);
+        }
+
+        $("tbody").append(tr);
+    }
+
+    $(".processing").hide();
+    setTimeout(function(){
+        set_listeners();
+        $(".hazard").show();
+        $(".main-wrapper").show();
+    },250);
+}
+
+/*  fetch_ghs() - fetch ghs codes */
+function fetch_ghs(){
+    /* verify if ghs is set */
+    var ghs = get_arg("ghs");
+    if(ghs){
+        /* fetch materials */
+        $.post("/scripts/opaso",{query: 26,ghs: ghs},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 */
+                    $(".title").text(ghs);
+                    $(".description").text(response["description"]);
+                    table_gen(response["ghs"]);
+                    next = Object.keys(response["ghs"]).length;
+                    $(".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 all codes */
+    else{
+        $.post("/scripts/opaso",{query: 25},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 ghs menu */
+                    ghs = response["ghs"];
+                    for(var code in ghs){
+                        var gc = element_gen("span",{class: "ghs-code",text: code});
+                        var w = element_gen("div",{class: "ghs",value: code,childs: {gc}});
+                        var m = element_gen("div",{class: "ghs-wrapper col-lg-1",value: code,childs: {w}});
+                        $(".ghs-codes").append(m);
+                    }
+
+                    $(".processing").hide();
+                    setTimeout(function(){
+                        set_listeners();
+                        $(".ghs-codes").show();
+                        $(".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;
+            }
+        });
+    }
+}

public_html/scripts/inventory.js

@@ -4,309 +4,462 @@
     Organization    :   Centro de Desarrollo y Consultoria Computacional
     Project         :   OPASO Material Registry   
     File            :   inventory.js
-    Description     :   Fetch lab inventory */
-
-/* globals */ 
-var editing,form_is_active,inventory,new_inventory,text;
-
-/* get_inventory() - fetch lab inventory from server */ 
-function get_inventory(){
-    var laboratory = get_arg("lab");    /* get lab id from url */
-    $.post("/scripts/opaso.php",{query: 4,laboratory: laboratory},function(data){
-        console.log(data);
-        try{    
-            var response = JSON.parse(data);    /* parse response as json */ 
-            switch(response["status"]){
-                case "success":                 /* on success, generate table body */ 
-                    /* update inventory header */ 
-                    $(".header").text(response["laboratory"]);
-                    /* extract inventory from response and generate table body */ 
-                    inventory = response["inventory"];
-                    var tbody = create_element("tbody","inventory-body");
-                    var row_index = 1;
-                    for(var row in inventory){
-                        /* generate option buttons */ 
-                        var edit = create_button("Edit","fas fa-pen","btn options","edit");
-                        var copy = create_button("Copy","fas fa-copy","btn options","copy");
-                        var remove = create_button("Remove","fas fa-minus-square","btn options","remove");
-                        /* append buttons to cell */ 
-                        var options = create_element("td","options-cell");
-                        options.append(edit,copy,remove);
-                        /* generate table row */
-                        var index = create_element("td","index",row_index);
-                        var tr = create_element("tr","inventory-row");
-                        tr.setAttribute("id",row);
-                        tr.append(options,index);
-                        /* generate inventory columns */ 
-                        for(var col in inventory[row]){
-                            var cell = create_element("td","inventory-cell",inventory[row][col]);
-                            cell.setAttribute("val",col);   /* identify cell field */
-                            tr.append(cell);
-                        }
-                        tbody.append(tr);
-                        row_index += 1;
-                    }
-                    $(".table").append(tbody);
-                    break;
-                case "error":                   /* on error, display message */ 
-                    display_error(response["error"]);
-                    break;
-                default:                        /* undefined status */
-                    display_error("Undefined status.");
-                    break;
+    Description     :   Generate inventory table */
 
-            }
-            set_listeners();                    /* listen for cell/button clicks */
-            loading_screen(false);              /* hide loading screen */
-        }
-        catch(error){
-            console.log(error.message);
-            display_error(error.message);
-        }
-    });
+/* save inventory data globally */ 
+var editing,inventory,form,text,timeout,i,next;
+var sort_key = "material";
+
+/* fetch inventory */
+$(document).ready(function(){
+    link_gen();
+    fetch_inventory();
+});
+
+/* display_form() - animate form  */
+function display_form(){
+    $(".form-shader").addClass("fade-in");
+    $(".edit-form").addClass("slide-down");
 }
-/* set_listeners() - set listeners for cell/button clicks */ 
+
+/* hide_form() - hide form  */
+function hide_form(){
+    $(".edit-form").removeClass("slide-down");
+    setTimeout(function(){
+        $(".form-shader").removeClass("fade-in");
+    },250);
+}
+
+/* set_listeners() - listen for events */ 
 function set_listeners(){
-    /* set listener for option buttons */ 
-    $(".options").click(function(){
+    /* option queries */ 
+    $(".action").click(function(){
         /* extract args */ 
         var option = $(this).attr("id");
-        var row = $(this).parent().parent().attr("id"); /* row id */
+        i = $(this).parent().parent().attr("id");
+
+        /* handle by option */
         switch(option){
-            case "edit":        /* edit inventory row (fallthrough) */
-            case "copy":        /* copy inventory row */
-                $(".form-header").text(option + " entry");
-                set_form(row);  /* populate form */
-                $(".submit").attr("id",option);
-                $(".submit").attr("val",row);
-                $(".close-form").attr("val",row);
+            case "edit":        /* edit row, populate row */
+                set_form();
                 break;
-            case "remove":       /* delete row form inventory */
-                /* extract arg */ 
-                var laboratory = get_arg("lab");
-                $.post("/scripts/opaso.php",{query: 8,laboratory: laboratory,eid: row},function(data){  /* send row to be deleted */
-                    // console.log(data);
-                    try{    
-                        var response = JSON.parse(data);    /* parse response as json */ 
-                        switch(response["status"]){
-                            case "success":                 /* on success, generate table body */ 
-                                break;
-                            case "error":                   /* on error, display message */ 
-                                display_error(response["error"]);
-                                break;
-                            default:                        /* undefined status */
-                                display_error("Undefined status.");
-                                break;
-                        }
-                    }
-                    catch(error){
-                        display_error(error.message);
-                    }
-                });
+
+            case "remove":      /* delete row, confirm */
+                set_confirm("Do you wish to delete entry from inventory?",option);
                 break;
-            default:                        /* undefined option */
-                display_error("Undefined option.");
+
+            default:            /* undefined, display alert */
+                set_alert("error","Invalid option")
                 break;
         }
     });
+
+    /* submit query */
+    $("#yes").click(function(){
+        hide_confirm();
+        $.post("/scripts/opaso",{query: 8,lab_id: get_arg("lab_id"),data: JSON.stringify(inventory[i])},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, generate table body */
+                    $(`#${i}`).remove();
+                    next -= 1;
+                    $(".table-total").text(`Total: ${next}`);
+
+                default:                            /* on success/error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    });
+
+    /* cancel query */
+    $("#no").click(hide_confirm);
+
     /* set listener for form submit button */
     $(".submit").click(function(){
-        /* extract args */ 
-        var option = $(this).attr("id");
-        var row = $(this).attr("val"); /* row id */
-        var laboratory = get_arg("lab");
-        /* set query for option */
-        var query = null;
-        switch(option){
-            case "edit":        /* edit row */
-                query = 6;
-                break;
-            case "copy":        /* copy row */
-                query = 7;
-                break;
-            default:        /* undefined option */ 
-                display_error("Undefined option.");
-                break;
-        }
-        /* get and validate form fields */ 
-        var form = get_form(row);
-        if(valid(form) && form_is_active){
-            reset_form();   /* reset form */ 
-            /* submit query for row */
-            console.log(JSON.stringify(form));
-            $.post("/scripts/opaso.php",{query: query,laboratory: laboratory,eid: row, fields: JSON.stringify(form)},function(data){
-                console.log(data);
-                /* parse response as json and display result of query */ 
-                try{    
-                    var response = JSON.parse(data);    /* parse response as json */ 
-                    switch(response["status"]){
-                        case "success":                 /* on success, generate table body */ 
-                            break;
-                        case "error":                   /* on error, display message */ 
-                            display_error(response["error"]);
-                            break;
-                        default:                        /* undefined status */
-                            display_error("Undefined status.");
-                            break;
-                    }
-                }
-                /* handle error */ 
-                catch(error){
-                    display_error(error.message);
+        if(get_form()){
+            /* submit query */
+            hide_form();
+            $.post("/scripts/opaso",{query: 6,lab_id: get_arg("lab_id"),mat_id: inventory[i]["material"]["mat_id"],man_id: inventory[i]["manufacturer"]["man_id"],uom: inventory[i]["uom"],capacity: inventory[i]["capacity"],data: JSON.stringify(form)},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 inventory */
+                    // console.log(inventory[i],form);
+                        for(var field in form){
+                            if(field === "mat_name"){
+                                inventory[i]["material"][field] = form[field];
+                            }
+
+                            else if(field === "man_name"){
+                                inventory[i]["manufacturer"][field] = form[field];
+                            }
+
+                            else{
+                                inventory[i][field] = form[field];
+                            }
+
+                            if(field === "sds"){
+                                $(`#${i}`).find(`td[value=${field}]`).find("span").attr("href",form[field]);
+                            }
+                            else{
+                                $(`#${i}`).find(`td[value=${field}]`).text(form[field]);   
+                            }
+                        }
+                        // console.log(inventory[i]);
+
+                    default:                            /* on success/error, display message */
+                        set_alert(status,response["message"]);
+                        break;
                 }
             });
         }
-        /* non-valid form, display warning */ 
-        else{
-            $(".fields-required").show();
+        /* invalid form, display warning */ 
+        else{            
+            set_alert("error","All fields required");
         }
     });
-    /* set listener for form close buttons */
-    $(".close-form").click(function(){
-        reset_form();   /* reset form */
-    });
-    /* set listener for double clicks on cells */ 
-    $(".inventory-cell").dblclick(function(){
-        /* generate text area if user isn't editing */ 
+
+    /* edit cell */ 
+    $(".entry-cell").dblclick(function(){
+        /* verify if user is editing */ 
         if(!editing){
-            $(this).height($(this).height());   /* avoid cell from collapsing */ 
-            $(this).css("padding","0px");       /* remove padding */
-            /* generate textarea with text from clicked cell */
-            text = $(this).text();
-            var textarea = create_element("textarea","edit-text",text);
-            textarea.style.width = $(this).width() + "px";
-            textarea.style.height = $(this).height() + "px";
-            /* insert text area into DOM */ 
+            $(this).height($(this).height());
+            $(this).css("padding","0px");
+
+            if($(this).attr("value") === "sds"){
+                text = $(this).find("span").attr("href");
+            }
+            else{
+                text = $(this).text();
+            }
+
+            i = $(this).parent().attr("id");
+            var textarea = element_gen("textarea",{class: "edit",text: text});
             $(this).html(textarea);
-            editing = true;     /* user is editing */ 
+            editing = true;
         }
     });
-    /* set listener for clicks on body */ 
-    $("body").click(function(element){
-        /* extract class of clicked element */ 
-        var target = $(element.target).attr("class");
-        if(editing && target != "edit-text"){
-            /* extract text from textarea and field and row id */ 
-            var delta_text = $(".edit-text").val();
-            var field = $(".edit-text").parent().val();
-            var row = $(".edit-text").parent().parent().attr("id");
-            /* reset styling and insert text to cell */ 
-            $(".edit-text").parent().removeAttr("style");
-            $(".edit-text").parent().html(delta_text);
-            editing = false;    /* deactivate editing */
-            /* submit row changes to inventory */
-            if(text != delta_text){
-                /* extract arg */
-                var laboratory = get_arg("lab");
-                /* send new field text */ 
-                $.post("/scripts/opaso.php",{query: 5,laboratory: laboratory,eid: row,text: delta_text, field: field},function(data){
-                    console.log(data);
-                    try{    
-                        var response = JSON.parse(data);    /* parse response as json */ 
-                        switch(response["status"]){
-                            case "success":                 /* on success, generate table body */ 
-                                break;
-                            case "error":                   /* on error, display message */ 
-                                display_error(response["error"]);
-                                break;
-                            default:                        /* undefined status */
-                                display_error("Undefined status.");
-                                break;
-                        }
-                    }
-                    catch(error){
-                        display_error(error.message);
-                    }
-                });
-            }
+
+    /* submit cell edit */ 
+    $("body").click(function(event){ 
+        var t = $(event.target).attr("class");
+        if(editing && t !== "edit"){
+            edit_field();
         }
-        /* reset form on exit */
-        else if(form_is_active && target == "form-window"){
-            reset_form();   /* reset form */
+    });
+
+    /* submit cell edit */ 
+    $(document).on("keypress",function(event){
+        if(event.which == 13 && editing){
+            event.preventDefault();
+            edit_field();
         }
     });
-    /* set listener for dropdown menu */ 
-    $( ".navbar-wrapper" ).hover(function(){},   /* on hover in, do nothing */ 
-        /* on hover out, hide dropdown menu */ 
-        function(){
-            /* check if menu is visible */ 
-            if($(".dropdown-menu").is(':visible')){
-                $(".dropdown-menu").removeClass("show");    /* hide menu */
-            }
+
+    /* hide form */ 
+    $(".close-form").click(function(e){
+        if(e.target === e.currentTarget){
+            hide_form();
         }
-    );
-}
-/* reset_form() - reset form and its styling */
-function reset_form(){
-    /* reset styling (label) */ 
-    $(".required-field").each(function(){
-        $(this).removeClass("required-field");
-        $(this).text($(this).text().replace("*",""));
     });
-    /* reset styling (input) */ 
-    $(".empty-field").each(function(){
-        $(this).removeClass("empty-field");
+
+    /* hide confirm alert */
+    $(".hide-confirm").click(function(e){
+        if(e.target === e.currentTarget){
+            hide_confirm();
+        }
     });
-    /* hide from */ 
-    $(".form-window").hide();
-    $(".fields-required").hide();
-    form_is_active = false;   /* deactivate form */
 }
-/* valid(form: dictionary) - check for invalid form entries */
-function valid(form){
-    var valid = true;
-    for(var field in form){
-        /* highlight empty fields */ 
-        if(!form[field]){
-            /* if not currently highlighted */
-            if($("[for=" + field + "]").attr("class") != "required-field"){
-                /* highlight label */ 
-                $("[for=" + field + "]").text($("[for=" + field + "]").text() + "*");
-                $("[for=" + field + "]").addClass("required-field");
-                /* highlight field */ 
-                $("[name=" + field + "]").addClass("empty-field");
-            }
-            valid = false;
+
+/* edit_field() - update material field */ 
+function edit_field(){
+    /* extract text */ 
+    var delta = $(".edit").val();
+    var field = $(".edit").parent().attr("value");
+
+    if(text != delta){
+
+        // console.log(inventory,i,inventory[i]);
+
+        let data = {mat_id: inventory[i]["material"]["mat_id"],man_id: inventory[i]["manufacturer"]["man_id"],capacity: inventory[i]["capacity"], uom: inventory[i]["uom"]};
+        
+        if(field === "capacity"){
+            data["prev_capacity"] = text;
+            data["new_capacity"] = delta;
+            total = inventory[i]["total"];
+            data["quantity"] = Math.ceil(total/delta);
+        }
+
+        else if(field === "total"){
+            data["total"] = delta;
+            data["quantity"] = Math.ceil(delta/data["capacity"]);
+        }
+
+        else if(field === "quantity"){
+            data["quantity"] = delta;
+            data["total"] = delta * data["capacity"];
+        }
+
+        else if(field === "uom"){
+            data["prev_uom"] = text;
+            data["new_uom"] = delta;
         }
-        /* remove styling for non empty fields */ 
+
         else{
-            /* if currently highlighted... */
-            if($("[for=" + field + "]").attr("class") == "required-field"){
-                /* reset styling for label */
-                $("[for=" + field + "]").text($("[for=" + field + "]").text().replace("*",""));
-                $("[for=" + field + "]").removeClass("required-field");
-                /* reset styling for field */ 
-                $("[name=" + field + "]").removeClass("empty-field");
+            data[field] = delta;
+        }
+        
+        /* update field */
+        $.post("/scripts/opaso",{query: 5,lab_id: get_arg("lab_id"),data: JSON.stringify(data),field: field},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 entry */
+                    if(field === "mat_name"){
+                        inventory[i]["material"][field] = delta;
+                    }
+                    else if(field === "man_name"){
+                        inventory[i]["manufacturer"][field] = delta;
+                    }
+                    else if(field === "total"){
+                        inventory[i]["quantity"] = Math.ceil(delta/inventory[i]["capacity"]);
+                        $(`#${i}`).find("td[value=quantity]").text(inventory[i]["quantity"]);   
+
+                    }
+
+                    else if(field === "capacity"){
+                        total = inventory[i]["total"];
+                        inventory[i]["quantity"] = Math.ceil(total/delta);
+                        $(`#${i}`).find("td[value=quantity]").text(inventory[i]["quantity"]);   
+                    }
+
+                    else if(field === "quantity"){
+                        inventory[i]["total"] = delta * inventory[i]["capacity"];
+                        $(`#${i}`).find("td[value=total]").text(inventory[i]["total"]);   
+                    }
+
+                    if(field === "sds"){
+                        var icon = element_gen("i",{class: "fas fa-link"});
+                        var link = element_gen("span",{class: "sds",href: decodeURI(delta),target: "_blank",rel: "noopener noreferrer",childs: {icon}});
+                        $(".edit").parent().html(link);
+                    }
+
+                    else{
+                        $(".edit").parent().html(delta);   
+                    }
+
+                    if(field !== "mat_name" && field !== "man_name"){
+                        inventory[i][field] = delta;
+                    }
+
+                    $(".edit").parent().removeAttr("style");
+
+
+
+                default:                        /* on error, display message */
+                    if(field === "sds"){
+                        var icon = element_gen("i",{class: "fas fa-link"});
+                        var link = element_gen("span",{class: "sds",href: decodeURI(text),target: "_blank",rel: "noopener noreferrer",childs: {icon}});
+                        $(".edit").parent().html(link);
+                    }
+
+                    else{
+                        $(".edit").parent().html(text);   
+                    }
+
+                    /* reset styling */
+                    $(".edit").parent().removeAttr("style");
+                    set_alert(status,response["message"]);
+                    break;
             }
+        });
+    }
+    else{
+        if(field === "sds"){
+            var icon = element_gen("i",{class: "fas fa-link"});
+            var link = element_gen("span",{class: "sds",href: decodeURI(text),target: "_blank",rel: "noopener noreferrer",childs: {icon}});
+            $(".edit").parent().html(link);
         }
+        else{
+            $(".edit").parent().html(text); 
+            $(".edit").parent().removeAttr("style");  
+        }  
     }
+
+    editing = false;
+}
+
+/* get_form(row: string) - get form data from row */
+function get_form(){
+    form = {};
+    var valid = true;
+
+    $(".material-input").each(function(){
+        var id = $(this).attr("id");
+        // var s = `.${id}`;
+        var field = $(this).attr("name");
+
+        /* highlight */
+        if(!is_valid($(this).val())){
+            // $(s).show();
+            valid = false;
+            $(this).addClass("invalid");
+        }
+
+        /* unhighlight */
+        else{
+            // $(s).hide();
+            $(this).removeClass("invalid");
+        }
+
+        form[field] = $(this).val();
+    });
+
     return valid; 
 }
-/* get_form(row: string) - get form data */
-function get_form(row){
-    var form = {};
-    for(var col in inventory[row]){
-        form[col] = $("[name=" + col + "]").val();
+/* set_form() - populate form using inventory data */
+function set_form(){
+    for(var field in inventory[i]){
+        if(field === "material"){
+            var s = "mat_name";
+            var val = inventory[i][field][s];
+        }
+
+        else if(field === "manufacturer"){
+            var s = "man_name";
+            var val = inventory[i][field][s]
+        }
+
+        else{
+            var s = field;
+            var val = inventory[i][field];
+        }
+        
+        $(`input[name=${s}]`).val(val);
     }
-    return form;
+
+    display_form();
 }
-/* set_form(row: string) - populate form using inventory data */
-function set_form(row){
-    /* fill form input by name */ 
-    for(var col in inventory[row]){
-        $("[name=" + col + "]").val(inventory[row][col]);
+
+/* table_gen(inventory: dictionary) - generate table body */
+function table_gen(data){
+    /* extract entries */
+    for(var d in data){
+        /* generate table row */
+        let tr = element_gen("tr",{class: "entry-row",id: d});
+        for(var field in data[d]){
+            switch(field){
+                case "material":                /* material, extract id */
+                    var link = element_gen("a",{class: "mat-link",text: data[d][field]["mat_name"],href: `materials?mat_id=${data[d][field]["mat_id"]}`,target: "_blank",rel: "noopener noreferrer"});
+                    var attributes = {class: "entry-cell",value: "mat_name",mat_id: data[d][field]["mat_id"],childs: {link}};
+                    break;
+
+                case "manufacturer":            /* manufacturer, extract id */
+                    var attributes ={class: "entry-cell",value: "man_name",man_id: data[d][field]["man_id"],text: data[d][field]["man_name"]};
+                    break;
+
+                case "sds":                     /* generate sds link */
+                    if(!data[d][field]){
+                        data[d][field] = "-";
+                    }
+                    var icon = element_gen("i",{class: "fas fa-link"});
+                    var link = element_gen("span",{class: "sds",href: decodeURI(data[d][field]),target: "_blank",rel: "noopener noreferrer",childs: {icon}});
+                    var attributes = {class: "entry-cell",value: field,childs: {link}};
+                    break;
+
+                default:                        /* default */
+                    if(!data[d][field]){
+                        data[d][field] = "-";
+                    }
+                    var attributes = {class: "entry-cell",value: field,text: data[d][field]};
+                    break;
+            }
+            
+            var td = element_gen("td",attributes);
+            tr.append(td);
+        }
+
+        /* generate actions cell */
+        let actions = {edit:{class: "t-icon material-icons",icon: "notes"},remove: {class: "t-icon material-icons",icon: "close"}};
+        var td = element_gen("td",{class: "actions-cell"});
+        
+        /* generate actions */
+        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: d,title: action,childs: {icon}});
+            td.append(button);
+        }
+
+        /* append */
+        tr.append(td);
+        $("tbody").append(tr);
     }
-    /* display form */ 
-    $(".form-window").show();
-    /* form is active */
-    form_is_active = true;
+
+    /* display inventory */
+    $(".processing").hide();
+    setTimeout(function(){
+        set_listeners();
+        $(".main-wrapper").show();
+    },250);
 }
-/* Load navbar and footer into document and fetch inventory */ 
-$(document).ready(function(){
-    $(".navbar-wrapper").load("/navbar.html",function(){
-        $(".footer-wrapper").load("/footer.html",function(){
-            current();          /* highlight current navbar link */
-            get_inventory();    /* fetch inventory from server */
+
+/* fetch_inventory() - fetch lab inventory */ 
+function fetch_inventory(){
+    /* extract lab id */
+    let lab_id = get_arg("lab_id");
+    if(is_valid(lab_id)){
+        $.post("/scripts/opaso",{query: 4,lab_id: lab_id},function(data){
+            // console.log(data);
+            /* extract response */
+            response = JSON.parse(data);
+            status = response["status"];
+
+            /* handle by status */
+            switch(status){
+                case "success":                 /* on success, generate table */
+                    inventory = response["lab"]["inventory"];
+
+                    /* generate inventory table */
+                    table_gen(inventory);
+                    next = Object.keys(inventory).length;
+                    $(".table-total").text(`Total: ${next}`);
+                    break;
+                case "expired":                 /* on expired, redirect */
+                    window.location.href = "/?error=session_expired";
+                    break;
+
+                default:                        /* on error, display message */
+                    set_alert(status,response["message"]);
+                    break;
+            }
         });
-    });
-});
+    }
+    /* missing args */
+    else{
+        set_alert("error","One or more arguments missing");
+    }
+}

public_html/scripts/laboratory.js

@@ -0,0 +1,569 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   laboratory.js
+    Description     :   Generate and display laboratory inventory */
+
+/* save inventory data globaly */
+var controlTimeout,control,total,r,next,transaction,row,form,admin
+var active = false;
+var sort_key = "mat_name";
+let lab_id = get_arg("lab_id");
+
+/* set listeners when document is ready */ 
+$(document).ready(function(){
+    link_gen();
+    laboratory();
+});
+
+function display_form(type,transaction){
+    let f = `.${type}-form`;
+    let s = `#${type}-submit`;
+    $(".form-shader").addClass("fade-in")
+    $(f).addClass("c-form");
+    $(f).addClass("slide-down");
+    $(s).attr("value",transaction);
+}
+
+/* hide_form() - hide form  */
+function hide_form(){
+    $(".c-form").removeClass("slide-down");
+    setTimeout(function(){
+        $(".form-shader").removeClass("fade-in");
+    },250);
+}
+
+/* main_transaction() - handle main transactions */
+function main_transaction(){
+    /* extract args */
+    let s = `#${r}`;
+    let amount = parseFloat($("#transaction").val());
+    var uom = $(s).find("td[value=uom]").text();
+    var mat_id = $(s).find("td[value=mat_name]").attr("mat_id");
+    var man_id = $(s).find("td[value=man_name]").attr("man_id");
+    let capacity = parseFloat($(s).find("td[value=capacity]").text());
+
+    
+    /* calculate material left */
+    if(transaction === "add"){
+        total += amount;
+    }
+    else{
+        total -= amount;
+    }
+
+    /* query server */
+    hide_form();
+    $.post("/scripts/opaso",{query: 9,lab_id: lab_id,mat_id: mat_id,man_id: man_id,capacity: capacity,transaction: transaction,total: total,amount: amount,uom: uom},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, update total/quantity */                      
+                if(total < 1){
+                    $(s).remove();
+                    $(".table-total").text($(".inventory-body tr").length);
+                }
+
+                /* update quantity */
+                else{
+                    $("#total").val(total);
+                    $("#transaction").val(0);
+                    let containers = total/capacity;
+                    $(s).find("td[value=quantity]").text(Math.ceil(containers));
+                    $(s).find("td[value=total]").text(total);
+                }
+
+                set_alert(status,"Transaction complete");
+                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;
+        }
+    });
+}
+
+/* add_material() - add material to inventory */
+function add_material(){
+    /* generate material entries */
+    row = {};
+    form = {};
+    row[next] = {};
+
+    /* populate entries */
+    $(".material-input").each(function(){
+        /* extract field name */
+        var field = $(this).attr("name");
+        /* generate inventory row */
+        switch(field){
+            case "quantity":
+                /* calculate total */
+                row[next][field] = $(this).val();
+                let mtotal = parseFloat(form["capacity"]) * parseFloat($(this).val());
+                form["total"] = mtotal;
+                row[next]["total"] = mtotal;
+                break;
+
+            case "mat_name":
+            case "man_name":
+            case "capacity":
+            case "uom":
+            case "location":
+                row[next][field] = $(this).val();
+                break;
+        }
+        
+        /* set field entry */
+        form[field] = $(this).val();
+    });
+
+    /* query server */
+    hide_form();
+    $.post("/scripts/opaso",{query: 10,lab_id: lab_id,data: JSON.stringify(form)},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 inventory */
+                // console.log(row);
+                /* extract args */
+                let mat_id = response["mat_id"];
+                let man_id = response["man_id"];
+                let s_uom = form["uom"].toLowerCase();
+                let s_total = parseFloat(form["total"]);
+                let s_capacity = parseFloat(form["capacity"]);
+                let s_man_name = form["man_name"].toLowerCase();
+
+                
+                /* verify if material exists */
+                var flag = true;
+                let s = `td[mat_id=${mat_id}]`;
+                $(s).each(function(){
+                    /* extract args */
+                    var capacity = parseFloat($(this).parent().find("td[value=capacity]").text());
+                    var man_name = $(this).parent().find("td[value=man_name]").text().toLowerCase();
+                    var uom = $(this).parent().find("td[value=uom]").text().toLowerCase();
+
+                    /* update quantities */
+                    if((capacity === s_capacity) && (man_name === s_man_name) && (uom === s_uom)){
+                        var ntotal = parseFloat($(this).parent().find("td[value=total]").text()) + s_total;
+                        var containers = ntotal/capacity;
+                        $(this).parent().find("td[value=total]").text(ntotal);
+                        $(this).parent().find("td[value=quantity]").text(Math.ceil(containers));
+                        flag = false;  
+                    }
+                });  
+                
+                /* generate table row */
+                if(flag){
+                    let tr = element_gen("tr",{class: "entry-row",id: next});
+                    for(var r in row){
+                        for(var field in row[r]){
+                            /* identify material */
+                            if(field === "mat_name"){
+                                var attributes = {class: "entry-cell",mat_id: mat_id,text: row[r][field],value: field};
+                            }
+
+                            /* identify material */
+                            else if(field === "man_name"){
+                                if(!row[r][field]){
+                                    row[r][field] = "-";
+                                }
+
+                                var attributes = {class: "entry-cell",man_id: man_id,text: row[r][field],value: field};
+                            }
+                            else{
+                                if(!row[r][field]){
+                                    row[r][field] = "-";
+                                }
+
+                                var attributes = {class: "entry-cell",text: row[r][field],value: field};   
+                            }
+
+                            var td = element_gen("td",attributes);
+                            tr.append(td);
+                        }
+                        
+                        let actions = {add:{class: "t-icon material-icons",icon: "add"},use: {class: "t-icon material-icons",icon: "remove"},offer: {class: "t-icon material-icons",icon: "redeem"},discard: {class: "t-icon material-icons",icon: "delete"}};
+                        var td = 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,title: action,childs: {icon}});
+                            td.append(button);
+                        }
+                    }
+
+                    /* append */
+                    tr.append(td);
+                    $(".inventory-body").append(tr);
+
+                    /* sort table */
+                    next += 1;
+                    full_sort(next,sort_key);
+                    $(".table-total").text(`Total: ${next}`);
+                }
+            
+            default:                    /* on success/error, display message */
+                set_alert(status,response["message"]);
+                break;
+        }
+    });
+}
+
+/* transaction - handle material transactions */
+function transaction(){
+    /* extract args */
+    transaction = $(this).attr("id");
+    r = $(this).parent().parent().attr("id");
+    let s = `#${r}`;
+    total = parseFloat($(s).find("td[value=total]").text());
+    uom = $(s).find("td[value=uom]").text();
+    let header = `${transaction} material (${uom})`;
+    $(".main-header").text(header);
+
+    
+    /* hide total capacity */
+    if(transaction === "add"){
+        $(".total").hide();
+    }
+
+    /* set total quantity */
+    else{
+        $("#total").val(total);
+        $(".total").show();
+    }
+
+    $("#transaction").val(0);
+    $(".transaction-label").text(transaction);
+    display_form("main",transaction);
+}
+
+/* fetch_material() - fetch material data */
+function fetch_material(){
+    /* extract key */
+    let mat_name = $(this).text();
+    let mat_id = $(this).attr("mat_id");
+    let uom = $(this).parent().find("td[value=uom]").text();
+    let man_id = $(this).parent().find("td[value=man_name]").attr("man_id");
+    let capacity = $(this).parent().find("td[value=capacity]").text();
+    
+    $.post("/scripts/opaso",{query: 12,lab_id: lab_id,mat_id: mat_id,man_id: man_id,capacity: capacity,uom: uom},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 material data */
+                let material = response["material"];
+                $("h5[value=mat_name]").text(mat_name);
+                var href = `/materials?mat_id=${mat_id}`;
+                $(".material-link").attr("href",href);
+
+                for(var a in material){
+                    let s = `span[value=${a}]`;
+                    if(a === "sds" && material[a]){
+                        var icon = element_gen("i",{class: "fas fa-link"});
+                        var link = element_gen("a",{href: decodeURIComponent(material[a]),target: "_blank",rel: "noopener noreferrer",childs: {icon}});
+                        $(s).html(link);
+                    }
+
+                    else{
+                        /* correct null values */
+                        if(!material[a]){
+                            material[a] = "-";
+                        }
+                        
+                        $(s).text(material[a]);
+                    }
+                }
+                
+                $(".material-data-shader").addClass("slide-right");
+                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;
+        }
+    });
+}
+
+/* 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);
+    });
+
+    /* add/use material */
+    $("tbody").on("click",".action",transaction);
+    
+    /* add material to inventory */
+    $(".add-material").click(function(){
+        display_form("add","add-material");
+    });
+    
+    /* handle popover */
+    $("tbody td[value=mat_name]").click(fetch_material);
+
+    
+    /* handle form submit */
+    $(".submit").click(function(){
+        /* add material */
+        transaction = $(this).attr("value");
+
+        if(transaction === "add-material"){
+            /* verify null fields */
+            var valid = true;
+            $(".material-input").each(function(){
+                var field = $(this).attr("name");
+
+                /* highlight */
+                if(!$(this).val()){
+                    valid = false;
+                    $(this).addClass("invalid");
+                }
+
+                /* unhighlight */
+                else{
+                    $(this).removeClass("invalid");
+                }
+            });
+
+            /* valid form */
+            if(valid){
+                set_confirm("Do you wish to add entry to inventory?",transaction);
+            }
+
+            /* invalid form */
+            else{
+                set_alert("warning","All fields required");
+            }
+        }
+
+        /* main transactions */
+        else{
+            /* validate amount */
+            let amount = parseFloat($("#transaction").val());
+            if((transaction === "add" || amount <= total) && amount > 0){
+                /* generate message */
+                let s = `#${r}`;
+                let uom = $(s).find("td[value=uom]").text();
+                let material = $(s).find("td[value=mat_name]").text();
+                let verb = transaction.charAt(0).toUpperCase() + transaction.slice(1);
+                let message = `${verb} ${amount}${uom} of ${material}. Is this correct?`;
+                
+                /* configure alert */
+                set_confirm(message,transaction);
+            }
+
+            /* amount not valid */
+            else{
+                set_alert("error","Please correct transaction amount");
+            }  
+        }
+    });
+
+    /* handle query submit */
+    $("#yes").click(function(){
+        transaction = $(this).attr("value");
+        
+        /* add material */
+        if(transaction === "add-material"){
+            add_material();
+        }
+       
+        /* main transactions */
+        else{
+            main_transaction(transaction);
+        }
+
+        hide_confirm();
+    });
+
+    /* handle query cancel */
+    $(".hide-confirm").click(function(element){
+        /* prevent child propagation */
+        if(element.target === element.currentTarget){
+            hide_confirm();
+        }
+    });
+
+    /* close form */ 
+    $(".close-form").click(function(element){
+        if(element.target === element.currentTarget){
+            hide_form();
+        }
+    });
+
+    /* hide material data */ 
+    $(".hide-material-data").click(function(element){
+        if(element.target === element.currentTarget){
+            $(".material-data-shader").removeClass("slide-right");
+        }
+    });
+
+    /* download file */
+    $(".download-option").click(function(){
+        /* extract args */
+        $("html").addClass("wait");
+        let download_type = $(this).attr("value");
+
+        /* generate file */
+        $.post("/scripts/opaso",{query: 24,download_type: download_type,lab_id: get_arg("lab_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 */
+                    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");
+        });
+    });
+}
+
+/* table_gen(data: dictionary) - generate table body */
+function table_gen(data){
+    for(var d in data){
+        /* generate table row */
+        let tr = element_gen("tr",{class: "entry-row",id: d});
+        let fields = data[d];
+        for(var field in fields){
+            /* identify material */
+            if(field === "material"){
+                var attributes = {class: "entry-cell",mat_id: fields[field]["mat_id"],text: fields[field]["mat_name"],value: "mat_name"};
+            }
+
+            /* identify material */
+            else if(field === "manufacturer"){
+                if(!fields[field]["man_name"]){
+                    fields[field]["man_name"] = "-";
+                }
+                var attributes = {class: "entry-cell",man_id: fields[field]["man_id"],text: fields[field]["man_name"],value: "man_name"};
+            }
+            else{
+                /* correct null entries */
+                if(!fields[field]){
+                    fields[field] = "-";
+                }
+                var attributes = {class: "entry-cell",text: fields[field],value: field};   
+            }
+
+            /* generate cell */
+            var td = element_gen("td",attributes);
+            tr.append(td);
+        }
+            
+        let actions = {add:{class: "t-icon material-icons",icon: "add"},use: {class: "t-icon material-icons",icon: "remove"},offer: {class: "t-icon material-icons",icon: "redeem"},discard: {class: "t-icon material-icons",icon: "delete"}};
+        var td = 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,title: action,childs: {icon}});
+            td.append(button);
+        }
+
+        /* append */
+        tr.append(td);
+        $(".inventory-body").append(tr);
+    }
+
+    $(".processing").hide();
+    setTimeout(function(){
+        $(".main-wrapper").show();
+    },250);
+}
+
+/* laboratory() - fetch lab inventory */ 
+function laboratory(){
+    /* avoid null queries */
+    if(is_valid(lab_id)){
+        $.post("/scripts/opaso",{query: 3,lab_id: lab_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 inventory */
+                    let inventory = response["lab"]["inventory"];
+                    let personnel = response["lab"]["personnel"];
+
+                    /* generate personnel table */
+                    for(var p in personnel){
+                        var name = element_gen("td",{class: "entry-cell person-name",text: personnel[p]["person_name"]});
+                        var access_level = element_gen("td",{class: "entry-cell access-level",text: personnel[p]["access_level"]});
+                        var person = element_gen("tr",{class: "personnel-row",childs:{name,access_level}});
+                        $(".personnel-body").append(person);
+                    }
+                    
+                    table_gen(inventory);
+                    set_listeners();
+                    next = Object.keys(inventory).length;
+                    $(".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 */
+                    /* display alert */
+                    set_alert(status,response["message"]);
+                    break;
+            }
+        });
+    }
+    /* missing arg */
+    else{
+        set_alert(status,"One or more arguments are missing");
+    }
+}