去C3化、隱藏"比較"、去開挖階段

R03/Index.php

@@ -78,7 +78,7 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 						<section class="panel">
 							<header class="panel-heading">
 								<div class="panel-actions">
-									<label id="displayCompareChart" style="display:block"><input type="checkbox" id="compareCheck" onclick="CheckCompare()">顯示全部比較</label>
+									<!--<label id="displayCompareChart" style="display:block"><input type="checkbox" id="compareCheck" onclick="CheckCompare()">顯示全部比較</label>-->
 									<a style="display:none" href="#" class="fa fa-caret-down"></a>
 									<a style="display:none" href="#" class="fa fa-times"></a>
 								</div>
@@ -153,21 +153,6 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 											</footer>
 										</section>
 									</div>
-
-									<div id="selectPhase" class="btn-group">
-										<select id="phase" class="mb-xs mt-xs mr-xs btn btn-default dropdown-toggle" onChange="LoadPage();">
-											<option value="2">選擇開挖階段</option>
-											<option value="2">第二挖至7.12m</option>
-											<option value="3">第三挖至11.62m</option>
-											<option value="4">第四挖至15.02m</option>
-											<option value="5">第五挖至18.42m</option>
-											<option value="6">第六挖至23.32m</option>
-											<option value="7">末段扶壁敲除</option>
-										</select>
-									</div>
-
-
-
 								</div>
 							</header>
 

script/js/r03.js

@@ -1,6 +1,7 @@
 var unityName = "R03Monitor";
 var errorTable;
 var sites = {};
+
 $.ajaxSettings.async = false;
 var jqxhr = $.getJSON("/BIM-Monitor/assets/errorTable.json", function (json) {
     errorTable = json;
@@ -11,8 +12,8 @@ var C3Json = $.getJSON("/BIM-Monitor/assets/json/c3-monitorList.json", function
 var R03Json = $.getJSON("/BIM-Monitor/assets/json/r03-monitorList.json", function (json) {
     sites["r03"] = json;
 });
-
 $.ajaxSettings.async = true;
+
 var lastNode;
 var errorArray = [];
 var switchNumber = 0;
@@ -20,10 +21,10 @@ passString('SIS');
 var wellTBA = [];
 var wellNameLists = [];
 var isAll = true;
-var isCompare = false;
-var saveCheckCompare = "";
-
+//var isCompare = false;
+//var saveCheckCompare = "";
 var dataTable;
+var sparklinePieData = [];
 
 $(document).ready(function () {
 
@@ -39,24 +40,13 @@ $(document).ready(function () {
         } else {
             let option = $(this).attr("monitor");
             isAll = true;
-            isCompare = false;
+            //isCompare = false;
             passString(option);
             document.getElementById("monitorName").innerHTML = option + "監測儀器";
-            /*if (lastNode != null) {
-                lastNode.style = "color:#abb4be;";
-            }
-            document.getElementById("errorCheck").checked = false;
-            document.getElementById("compareCheck").checked = false;
-
-            lastNode = document.getElementById(option).parentNode;
-            lastNode.style = "color:#0088cc;";*/
-
             LoadPage();
         }
     });
 
-
-
 })
 
 //Pass monitor equipment's name to index.php select form
@@ -64,23 +54,18 @@ function passString(option) {
     window.localStorage.setItem("option", option);
 }
 
-//unity給一個wellname(string)
+//unity選擇到一個監測儀器後，在selectWell.cs會給一個監測儀器名稱(例：OW-1)給網頁
 function GetWellName(wellName) {
     showWell(wellName, true);
 }
 
-function submitForm() {
-    document.getElementById("CSVform").submit();
-}
-
+//網頁用SendMessage()傳Initialization()給unity時，unity會回傳一個所有監測儀器名稱(例：OW-1,OW-2 ...)給網頁
 function GetWellNameList(wellNameList) {
     window.localStorage.setItem("wellNameList", wellNameList);
 }
 
-
-
 //display well name and send its name to showWell function
-function displayWellInfo2(equipment) {
+function getEquipmentName(equipment) {
     $.ajaxSettings.async = false;
     $.ajax({
         url: '/BIM-Monitor/script/php/getEquipmentName.php',
@@ -95,40 +80,36 @@ function displayWellInfo2(equipment) {
     });
     $.ajaxSettings.async = true;
 }
-var sparklinePieData = [];
 
+//unity載入後會先跑LoadPage();
 function LoadPage() {
 
-    if(isLoad){
-        //myGameInstance.SendMessage("Monitor", "ChangeSiteModel", "R03");
-    }
-
     var option = window.localStorage.getItem("option");
-    displayWellInfo2(option);
+    getEquipmentName(option);
 
     $('#' + window.localStorage.getItem("option")).removeClass('hidden').removeAttr('disabled');
 
     document.getElementById("monitorSelect2").innerHTML = "選擇觀測儀器";
 
-    if (option == "ELP" || option == "OW")
-        document.getElementById("displayCompareChart").style.display = 'block';
-    else
-        document.getElementById("displayCompareChart").style.display = 'none';
-
-    if (option != "ELP" && option != "SIS" && option != "SID") {
-        document.getElementById("phase").style.display = "none";
-    } else {
-        document.getElementById("phase").style.display = "block";
-    }
-
     var wellTBALocal = getCheckValue();
     var dataValue = option;
     for (i = 0; i < wellTBALocal.length; i++) {
         dataValue = dataValue.concat(',', wellTBALocal[i]);
-
     }
+
     if (isLoad) {
+        //dataValue = 監測儀器代號,超出警戒值的儀器名稱
+        //AddDataTable會存option：監測儀器代號(string)
+        //               abnormal：超出警戒值的儀器名稱(array)
+        //               gameObjects：所有監測儀器名稱(array)
+        //               optionGameObjects：包含監測儀器代號的所有監測儀器名稱(array)
+        //               到unity的DataTable.cs裡面
         myGameInstance.SendMessage("Monitor", "AddDataTable", dataValue);
+        //原本的模型牆被挖空，SID、RS、VG都有建各自的牆，若選擇一種監測儀器則另外兩種隱藏掉
+        //addData(DataTable.option);
+        //依照DataTable的option將所有optionGameObjects改成normal的顏色
+        //Search(DataTable.option, DataTable.abnormal); 
+        //將所有abnormal的儀器改成abnormal的顏色
         myGameInstance.SendMessage("Monitor", "Initialization");
     }
 
@@ -161,19 +142,17 @@ function LoadPage() {
 
 //get well info from sql server
 function showWell(str, changeCamera) {
-    var strLocal = "";
-    var executed = false;
-    var xhttp;
-    isCompare = false;
-    $("#compareCheck").checked = false;
 
+    var strLocal = "";
+    //isCompare = false;
+    //$("#compareCheck").checked = false;
     strLocal = str;
-
     $("#monitorSelect2").innerHTML = strLocal;
-
     getTable(str);
     displayChart(str, "myChart");
+
     if (isLoad) {
+        //把現在選擇的儀器名稱(例：OW-1)傳到unity，unity找模型名稱相同的改變模型顏色以及鏡頭置中模型
         myGameInstance.SendMessage("MainCamera", "GetDataFromWebGL", str);
     }
     if (!changeCamera) {
@@ -181,7 +160,6 @@ function showWell(str, changeCamera) {
     }
 
 }
-var sparklinePieData = [];
 
 function getTable(monitor) {
     $.ajax({
@@ -205,9 +183,9 @@ function getTable(monitor) {
                     head = "TOP";
                 header += `<th>${head}</th>`;
             }
-        } else if(haveDirection){
+        } else if (haveDirection) {
             header = `<th>${monitor}(1~3向)</th><th>${monitor}(2~4向)</th>`;
-        }else {
+        } else {
             header = `<th id="unit">測量值 單位:</th>`;
         }
 
@@ -263,15 +241,6 @@ function getTable(monitor) {
             dataTable.draw();
         });
 
-        /*$("#tableName").innerHTML = monitor + "資料表";
-        saveCheckCompare = monitor + "資料表";
-        displayChart(monitor, "myChart");
-        reset();
-
-        document.getElementById("dataTable").innerHTML = data;*/
-
-        console.log(result);
-
     }).error(function (error) {
         console.log(error);
     }).complete(function (e) {
@@ -279,15 +248,10 @@ function getTable(monitor) {
     });
 }
 
-
+//建立pie chart
 function getCheckValue() {
+    /*
     var dataArray = [];
-    var phase
-    if (document.getElementById("phase") !== null) {
-        phase = document.getElementById("phase").value;
-    } else {
-        phase = 7;
-    }
 
     var option = window.localStorage.getItem("option");
     for (i = 0; i < errorTable.length; i++) {
@@ -307,8 +271,7 @@ function getCheckValue() {
                 table_name: table_name,
                 warning1: warning1,
                 warning2: warning2,
-                warning_Count: warning_Count,
-                phase: phase
+                warning_Count: warning_Count
             },
             async: false,
             contentType: "application/json",
@@ -332,65 +295,62 @@ function getCheckValue() {
             script.setAttribute('src', url);
             document.getElementsByTagName('head')[0].appendChild(script);
             document.getElementById("percent").innerHTML = Math.round(percent * 100) + "%";
-
-
         })
         .error(function () {
             //alert("錯誤統計未正常獲取");
         })
         .complete(function () {});
     return dataArray;
+    */
+    var dataArray = [];
+    return dataArray;
 }
 
+//建立左側監測儀器(異常數量/總數量)
 function GetCheckAllAJAXValue() {
+    /*
+        errorArray = [];
+        for (i = 0; i < errorTable.length; i++) {
 
-    errorArray = [];
-    var phase
-    if (document.getElementById("phase") !== null) {
-        phase = document.getElementById("phase").value;
-    } else {
-        phase = 7;
-    }
-    for (i = 0; i < errorTable.length; i++) {
-
-        var method = errorTable[i].method;
-        var option = errorTable[i].table_name;
-        var table_name = errorTable[i].table_name + "data";
-        var warning1 = errorTable[i].warning1;
-        var warning2 = errorTable[i].warning2;
-        var warning_Count = errorTable[i].warning_Count;
-        $.ajax({
-                url: "/BIM-Monitor/script/php/checkValue2.php",
-                data: {
-                    method: method,
-                    table_name: table_name,
-                    warning1: warning1,
-                    warning2: warning2,
-                    warning_Count: warning_Count,
-                    phase: phase
-                },
-                async: false,
-                contentType: "application/json",
-                dataType: "json"
-            })
-
-            .success(function (response) {
-
-                var normal_count = response['normal_count'];
-                var abnormal_count = response['abnormal_count'];
-                var all_count = 0 + normal_count + abnormal_count;
-
-
-                document.getElementById(option).innerHTML = "(<font color='#FF0000'>" + abnormal_count + "</font>/" + all_count + ")";
-                errorArray.push(abnormal_count);
-            })
-            .error(function () {
-                alert("錯誤統計未正常獲取");
-            })
-            .complete(function () {});
-    }
+            var method = errorTable[i].method;
+            var option = errorTable[i].table_name;
+            var table_name = errorTable[i].table_name + "data";
+            var warning1 = errorTable[i].warning1;
+            var warning2 = errorTable[i].warning2;
+            var warning_Count = errorTable[i].warning_Count;
+            $.ajax({
+                    url: "/BIM-Monitor/script/php/checkValue2.php",
+                    data: {
+                        method: method,
+                        table_name: table_name,
+                        warning1: warning1,
+                        warning2: warning2,
+                        warning_Count: warning_Count
+                    },
+                    async: false,
+                    contentType: "application/json",
+                    dataType: "json"
+                })
+
+                .success(function (response) {
+
+                    var normal_count = response['normal_count'];
+                    var abnormal_count = response['abnormal_count'];
+                    var all_count = 0 + normal_count + abnormal_count;
+
+
+                    document.getElementById(option).innerHTML = "(<font color='#FF0000'>" + abnormal_count + "</font>/" + all_count + ")";
+                    errorArray.push(abnormal_count);
+                })
+                .error(function () {
+                    //alert("錯誤統計未正常獲取");
+                })
+                .complete(function () {});
+        }
+    */
 }
 
+/*
 function CheckCompare() {
     var option = window.localStorage.getItem("option");
     var text = "";
@@ -413,9 +373,8 @@ function CheckCompare() {
         else if (option == "OW")
             displayChart("OW-1", "myChart");
     }
-
-
 }
+*/
 
 function CheckError() {
     var checkBox = document.getElementById("errorCheck");
@@ -427,62 +386,6 @@ function CheckError() {
     SetList();
 }
 
-function uploadCSV() {
-
-    var input = $("#fileToUpload");
-    var inputLength = input[0].files.length; //No of files selected
-    var file;
-    var formData = new FormData();
-
-    for (var i = 0; i < inputLength; i++) {
-        file = input[0].files[i];
-        formData.append('fileToUpload[]', file);
-    }
-    $.ajax({
-        url: "/BIM-Monitor/script/php/upload.php",
-        type: "POST",
-        data: formData,
-        processData: false,
-        contentType: false,
-        beforeSend: function () {
-
-        }
-    }).done(function (data) {
-        var stack_bar_top = {
-            "dir1": "down",
-            "dir2": "right",
-            "push": "top",
-            "spacing1": 0,
-            "spacing2": 0
-        };
-
-        if (data.includes("IS")) {
-            var notice = new PNotify({
-                title: '通知',
-                text: '上傳成功!',
-                type: 'success',
-                addclass: 'stack-bar-top',
-                stack: stack_bar_top,
-                width: "100%"
-            });
-        } else {
-            var notice = new PNotify({
-                title: '通知',
-                text: '上傳失敗!',
-                type: 'error',
-                addclass: 'stack-bar-top',
-                stack: stack_bar_top,
-                width: "100%"
-            });
-        }
-
-    }).error(function () {
-
-    });
-
-}
-
-
 //Display chart
 function displayChart(str, elementID) {
     var xhttp;
@@ -498,11 +401,11 @@ function displayChart(str, elementID) {
                 var c_m_value = v_variables[2].split(" ");
 
                 //Start to make the chart
-                if (isCompare) {
-                    displayCompareChart();
-                } else {
-                    init(c_wellName, c_m_date, c_m_value, elementID);
-                }
+                //if (isCompare) {
+                //displayCompareChart();
+                //} else {
+                init(c_wellName, c_m_date, c_m_value, elementID);
+                //}
 
 
             } else if (str.includes("TI")) {
@@ -514,11 +417,11 @@ function displayChart(str, elementID) {
                 var c2_wellName = v_variables[3];
                 var c2_m_date = v_variables[4].split(" ");
                 var c2_m_value = v_variables[5].split(" ");
-                if (isCompare) {
-                    displayCompareChart();
-                } else {
-                    init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_value, elementID);
-                }
+                //if (isCompare) {
+                //displayCompareChart();
+                //} else {
+                init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_value, elementID);
+                //}
 
 
             } else if (str.includes("SIS") || str.includes("SID")) {
@@ -569,11 +472,8 @@ function displayChart(str, elementID) {
     xhttp.open("GET", "/BIM-Monitor/script/php/getChartData2.php?q=" + str, true);
     xhttp.send();
 
-
-
-
 }
-
+/*
 function displayCompareChart() {
     var option = window.localStorage.getItem("option");
     var m_date = [];
@@ -611,16 +511,14 @@ function displayCompareChart() {
         .complete(function () {});
 
 }
+*/
 
-//Reset the camera
 function ResetCamera() {
     if (isLoad) {
         myGameInstance.SendMessage("MainCamera", "ResetCamera");
     }
 }
 
-
-
 function SetList() {
     var wellNameListsLocal = "";
     var isError = false;
@@ -639,22 +537,12 @@ function SetList() {
         wellNameListsLocal = wellNameLists[i];
         var option = document.createElement("li");
         var createA = document.createElement("a");
-        /*if(wellNameLists[i].includes("ELP")){
-        	if(wellNameLists[i].includes("A")){
-        		wellNameListsLocal = wellNameLists[i] + ',' + wellNameLists[i].replace('A','-1A');
-        	}else{
-        		wellNameListsLocal = wellNameLists[i] + ',' + wellNameLists[i] + '-1';
-        	}
-        }	*/
         var createAText = document.createTextNode(wellNameListsLocal);
         var createButton = document.createElement("button");
         var createButtonText = document.createTextNode(wellNameListsLocal);
         createButton.setAttribute('class', "mb-xs mt-xs mr-xs modal-with-zoom-anim btn btn-success modal-dismiss");
 
-
-
         for (j = 0; j < wellTBA.length; j++) {
-
             if (wellNameLists[i] == (wellTBA[j])) {
                 createA.style = "color:red;";
                 createButton.setAttribute('class', "mb-xs mt-xs mr-xs btn btn-danger modal-dismiss");
@@ -684,61 +572,10 @@ function UpdateGPS(GPS) {
     }
 }
 
-
-
-
-function forLoopSMOption() {
-    var elm = document.getElementById('SM'), // get the select
-        df = document.createDocumentFragment(); // create a document fragment to hold the options while we create them
-
-    for (var i = 1; i <= 81; i++) { // loop, i like 42.
-        var option = document.createElement('option'); // create the option element
-        option.value = "SM-" + i; // set the value property
-        option.appendChild(document.createTextNode("SM-" + i)); // set the textContent in a safe way.
-        df.appendChild(option); // append the option to the document fragment
-    }
-    elm.appendChild(df); // append the document fragment to the DOM. this is the better way rather than setting innerHTML a bunch of times (or even once with a long string)
-}
-
-function forLoopHMOption() {
-    var elm = document.getElementById('HM'),
-        df = document.createDocumentFragment();
-
-    for (var i = 1; i <= 15; i++) {
-        var option = document.createElement('option');
-        option.value = "HM-1-" + i;
-        option.appendChild(document.createTextNode("HM1-" + i));
-        df.appendChild(option);
-    }
-    for (var j = 1; j <= 7; j++) {
-        var option = document.createElement('option');
-        option.value = "HM-2-" + j;
-        option.appendChild(document.createTextNode("HM2-" + j));
-        df.appendChild(option);
-    }
-    for (var k = 1; k <= 11; k++) {
-        var option = document.createElement('option');
-        option.value = "HM-3-" + k;
-        option.appendChild(document.createTextNode("HM3-" + k));
-        df.appendChild(option);
-    }
-    for (var l = 1; l <= 7; l++) {
-        var option = document.createElement('option');
-        option.value = "HM-4-" + l;
-        option.appendChild(document.createTextNode("HM4-" + l));
-        df.appendChild(option);
-    }
-    elm.appendChild(df);
-}
-var errorChart = null;
-
-
-
 //Start making the chart
 function init(c_wellName, c_m_date, c_m_value, elementID) {
 
     var ctx = document.getElementById(elementID).getContext("2d");
-    var phase = document.getElementById("phase").value;
     var ELPwarning = [0, -4.6, -10, -15.3, -23.2, 0];
     var ELP_1warning = [0, -7.9, -13.3, 0, 0, 0];
 
@@ -760,20 +597,6 @@ function init(c_wellName, c_m_date, c_m_value, elementID) {
     var xLabel = "";
 
     if (c_wellName.includes("ELP")) {
-        if (c_wellName != "ELP-1" && c_wellName.includes("-1")) {
-            if (ELP_1warning[phase - 2] != 0) {
-                for (i = 0; i < c_m_date.length; i++) {
-                    warning.push(ELP_1warning[phase - 2]);
-                }
-            }
-        } else {
-            if (ELPwarning[phase - 2] != 0) {
-                for (i = 0; i < c_m_date.length; i++) {
-                    warning.push(ELPwarning[phase - 2]);
-                }
-            }
-        }
-
 
         yLabel = "水位高程GL(m)";
         xLabel = "日期";
@@ -1011,33 +834,6 @@ function init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_val
         }
     });
 
-    /*if(c_wellName.includes("ELP") && phase != 2 && phase != 7){
-
-        window.chart.data.datasets.push({
-            label: "警戒值",
-            data: warning,
-            borderColor: "#FF0000",
-			pointRadius: 0
-        });
-
-        if(phase == 3 || phase == 4){
-            let warning2 = [];
-
-            for (i = 0; i < c2_m_date.length; i++) {
-                warning2.push(ELP_1warning[phase-2]);
-            }
-
-            window.chart.data.datasets.push({
-                label: "警戒值2",
-                data: warning2,
-                borderColor: "#FF0000",
-                pointRadius: 0
-            });
-        }
-
-        window.chart.update();
-    }*/
-
     //ELP does not have second warning line, so you need to update it seperately
     if (c_wellName.includes("TI")) {
 
@@ -1066,7 +862,6 @@ function initSISSID(c_m_date, c_m_depth, c_m_value, elementID, str) {
     var ctx = document.getElementById(elementID).getContext("2d");
     var datasetValue = [];
     let warning = [];
-    var phase = document.getElementById("phase").value;
     var SID_data = [];
     var SIS_data = [];
     var SIS_array = ['SIS-1', 'SIS-2-1', 'SIS-2-2', 'SIS-3', 'SIS-4', 'SIS-6', 'SIS-7'];
@@ -1074,25 +869,8 @@ function initSISSID(c_m_date, c_m_depth, c_m_value, elementID, str) {
     var index = 0;
     var num = 0;
 
-    if (phase == 2) {
-        SID_data = [1.85, 1.128, 1.128, 1.128, 1.698, 1.698, 1.698, 1.186, 1.186, 1.032];
-        SIS_data = [1.85, 1.128, 1.128, 1.128, 1.698, 1.186, 1.032];
-    } else if (phase == 3) {
-        SID_data = [2.39, 1.434, 1.434, 1.434, 2.304, 2.304, 2.304, 1.7, 1.7, 1.569];
-        SIS_data = [2.39, 1.434, 1.434, 1.434, 2.304, 1.7, 1.569];
-    } else if (phase == 4) {
-        SID_data = [2.89, 1.856, 1.856, 1.856, 2.968, 2.968, 2.968, 2.267, 2.267, 2.176];
-        SIS_data = [2.89, 1.856, 1.856, 1.856, 2.968, 2.267, 2.176];
-    } else if (phase == 5) {
-        SID_data = [3.36, 2.626, 2.626, 2.626, 4.531, 4.531, 4.531, 3.727, 3.727, 3.285];
-        SIS_data = [3.36, 2.626, 2.626, 2.626, 4.531, 3.727, 3.285];
-    } else if (phase == 6) {
-        SID_data = [4.015, 3.832, 3.832, 3.832, 7.966, 7.966, 7.966, 5.049, 5.049, 5.208];
-        SIS_data = [4.015, 3.832, 3.832, 3.832, 7.966, 5.049, 5.208];
-    } else if (phase == 7) {
-        SID_data = [4.918, 4.458, 4.458, 4.458, 8.909, 8.909, 8.909, 5.797, 5.797, 5.988];
-        SIS_data = [4.918, 4.458, 4.458, 4.458, 8.909, 5.797, 5.988];
-    }
+    SID_data = [1.85, 1.128, 1.128, 1.128, 1.698, 1.698, 1.698, 1.186, 1.186, 1.032];
+    SIS_data = [1.85, 1.128, 1.128, 1.128, 1.698, 1.186, 1.032];
 
     if (str.includes("SIS")) {
         index = SIS_array.indexOf(str);
@@ -1172,6 +950,7 @@ function initSISSID(c_m_date, c_m_depth, c_m_value, elementID, str) {
 }
 
 function init6(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_value, c3_wellName, c3_m_value, c4_wellName, c4_m_value, c5_wellName, c5_m_value, c6_wellName, c6_m_value, elementID) {
+
     var ctx = document.getElementById(elementID).getContext("2d");
     let warning = [];
     if (c_wellName.includes("RS")) {
@@ -1268,8 +1047,9 @@ function init6(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_value, c3_well
 
         window.chart.update();
     }
-}
 
+}
+/*
 function initCompare(m_date, chart_data, index, label) {
     var ctx = document.getElementById("myChart").getContext("2d");
     var value = -7.9;
@@ -1329,9 +1109,8 @@ function initCompare(m_date, chart_data, index, label) {
             });		
     	}
     */
-    window.chart.update();
-
-}
+//window.chart.update();
+//}
 
 //Chart has multiple lines that need different color
 function randomColor() {
@@ -1352,6 +1131,5 @@ function reset() {
     var table = document.createElement("table");
     table.id = "dataTable";
     table.className = "display";
-    //table.style.width = "100%";
     myNode.appendChild(table);
 }