bug 修正 ｜搜尋功能

Frontend/_historyData2.html

@@ -124,10 +124,7 @@
             <div
               class="dropdown-menu favorite_dropdown"
               aria-labelledby="favoriteDropdownMenu"
-            >
+            ></div>
-
-         
-            </div>
           </div>
         </div>
       </div>
@@ -183,7 +180,9 @@
           <button type="button" class="btn btn-secondary" data-dismiss="modal">
             關閉
           </button>
-          <button type="button" class="btn btn-primary confirm_modal_btn" >確認</button>
+          <button type="button" class="btn btn-primary confirm_modal_btn">
+            確認
+          </button>
         </div>
       </div>
     </div>
@@ -207,6 +206,7 @@
   pageAct.hisBuiName = "";
   hisFirst = true;
   var device_list = [];
+  var temp_device_list = []; // 用來儲存搜尋資料的值
   $(function () {
     flatpickr(".selectDate", {
       locale: "zh_tw",
@@ -224,7 +224,6 @@
     setDateType(1, $(`[onclick="setDateType(1, this)"]`));
     initList();
     getFavorite();
-
     loadTable(null);
   });
 
@@ -273,62 +272,23 @@
       $("[name=subRadio]:checked").parent().addClass("btn-info");
       subTag = subRadios.val(); //sub tag
       pageAct.selectedSub = subTag;
-        if(e){
+      if (e) {
-          await getSidebar(subTag);
+        await getSidebar(subTag);
-        }
+      }
 
       result = true;
     }
     return result;
   }
 
-  
-  function selectAllBuildingDevice(e){    
-    if(e.target.name==='bui_selected'){
-      let curData = device_list.find(({building_tag})=> e.target.dataset.building ===building_tag) 
-      const curBuisDev = curData.device_list.map(({device_number})=> device_number)
 
-      const form = $("#device_list_form")[0];
+    function showDeviceList(data){
-      const formData = new FormData(form);    
+      temp_device_list = data;
-      let list = formData.getAll("Device_list")
+      let strHtml = "";
-
-        if(e.target.checked){
-          
-          list = [...list, ...curBuisDev];
-        }else{
-          
-          list = list.filter((dev)=> !curBuisDev.includes(dev))
-        }
-
-        $('[name="Device_list"]').each((i, e)=>{
-         if( list.includes(e.dataset.device)){
-          e.checked = true;
-         }else{
-          e.checked = false;
-         }
-        })
-    }
-  }
-  document.querySelector(".js_nested_list").addEventListener("change",selectAllBuildingDevice)
-  
-  // 取得右側sidebar
-  function getSidebar(subTag) {
-    // let subTag = $("[name=subRadio]:checked").val()
-    let sendData = {
-      sub_system_tag: subTag,
-    };
-    objSendData.Data = sendData;
-    let url = baseApiUrl + "/api/History/GetDeviceInfo";
-    function stop(e) {
-      e.stopPropagation();
-    }
-    function success(res) {
-      let strHtml = ``;
       let i1 = null,
         i2 = null,
         first = true;
-      device_list = res.data;
+      $.each(data, function (index, building) {
-      $.each(res.data, function (index, building) {
         let innerHtml = "";
         $.each(building.device_list, function (index2, val2) {
           innerHtml += ` <li class="card-header px-5 list-group-item">
@@ -340,9 +300,11 @@
         });
 
         strHtml += ` <div class="card">
-    <div class="card-header px-5" id="bui_${building.building_tag}">
+    <div class="card-header px-3">
-      <input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="bui_selected" data-building="${building.building_tag}"  value="${building.building_tag}" id="bui_${building.building_tag}">
+      <input class="custom-control-input opacity-100" style="z-index: 0" type="checkbox" name="bui_selected" data-building="${building.building_tag}"  value="${building.building_tag}" id="bui_${building.building_tag}">
-      <p class="h6 mb-0" data-toggle="collapse" data-target="#collapse_${building.building_tag}" aria-expanded="false" aria-controls="collapse_${building.building_tag}">
+      <p class="h6 mb-0 ml-2"
+      style="cursor:pointer;"
+      data-toggle="collapse" data-target="#collapse_${building.building_tag}" aria-expanded="false" aria-controls="collapse_${building.building_tag}">
         ${building.building_name}
       </p>
     </div>
@@ -357,7 +319,121 @@
   </div>`;
       });
 
-      $(".js_nested_list").html(strHtml);
+      let wholeContent = `
+      <div class="card">
+    <div class="card-header px-3">
+      <input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="bui_selected" data-building="all"  value="all" id="bui_all">
+      <p class="h6 mb-0 ml-3">全選</p>
+      <div class="card-body">${strHtml}</div>
+    </div>
+    </div>
+      `;
+      $(".js_nested_list").html(wholeContent);
+      $(`[data-toggle="collapse"]`).first().click();
+    }
+
+    document.querySelector("#js_nested_list_filter").addEventListener("keyup",(e)=>{
+      
+      if(e.key==="Enter"){
+        let searchDev = [];
+        device_list.forEach((d) => {
+          const devs = d.device_list.filter(({device_name})=>device_name.includes(e.target.value))
+          if(devs.length>0){
+            searchDev = [...searchDev, {
+            ...d,
+            device_list: devs
+          }];
+          }
+        });
+
+        showDeviceList(searchDev)
+      }
+    })
+
+    function selectAllBuildingDevice(e) {
+    let curData=[], curBuisDev=[], checkBui=[];
+    if (e.target.name === "bui_selected") {
+      if (e.target.dataset.building == "all") {
+        temp_device_list.forEach(({ device_list }) => {
+          curData = [...curData, ...device_list];
+        });
+        curBuisDev = curData.map(
+          ({ device_number }) => device_number
+        );
+        if(e.target.checked){
+              checkBui = temp_device_list.map(({ device_list, building_tag }) => ({
+            building_tag,
+            builing_check:true        
+          }));
+              }else{
+
+              checkBui = temp_device_list.map(({ device_list, building_tag }) => ({
+            building_tag,
+            builing_check:false        
+          }));
+        }
+
+      } else {
+        curData = temp_device_list.find(
+          ({ building_tag }) => e.target.dataset.building === building_tag
+        );
+        curBuisDev = curData.device_list.map(
+          ({ device_number }) => device_number
+        );
+      }
+
+      const form = $("#device_list_form")[0];
+      const formData = new FormData(form);
+      let list = formData.getAll("Device_list");
+
+      if (e.target.checked) {
+        list = [...list, ...curBuisDev];
+      } else {
+        list = list.filter((dev) => !curBuisDev.includes(dev));
+      }
+
+    checkBui.forEach(({ building_tag, builing_check }) => {
+      if (builing_check) {
+        $(
+          `[name="bui_selected"][data-building="${building_tag}"]`
+        )[0].checked = true;
+      } else {
+        $(
+          `[name="bui_selected"][data-building="${building_tag}"]`
+        )[0].checked = false;
+      }
+    });
+
+      $('[name="Device_list"]').each((i, e) => {
+        if (list.includes(e.dataset.device)) {
+          e.checked = true;
+        } else {
+          e.checked = false;
+        }
+      });
+    }
+  }
+  
+  document
+    .querySelector(".js_nested_list")
+    .addEventListener("change", selectAllBuildingDevice);
+  
+    // 取得右側sidebar
+  function getSidebar(subTag) {
+    // let subTag = $("[name=subRadio]:checked").val()
+    let sendData = {
+      sub_system_tag: subTag,
+    };
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetDeviceInfo";
+    function stop(e) {
+      e.stopPropagation();
+    }
+    function success(res) {
+      
+      device_list = res.data;
+      temp_device_list = res.data;
+      showDeviceList(res.data)
       $(`[name="Device_list"]`).first().click();
       devPointsList();
     }
@@ -369,8 +445,6 @@
     const form = $("#device_list_form")[0];
     const formData = new FormData(form);
 
-    console.log(formData.get("Device_list"));
-
     let sendData = {
       Device_list:
         typeof formData.get("Device_list") == "string"
@@ -417,7 +491,7 @@
 
   function getData(e) {
     e?.preventDefault();
-    // $(loadEle)?.Loading?.("start");
+    $(loadEle)?.Loading?.("start");
     let sendData = {
       Type: pageAct.dateType,
       Points: pageAct.devicePoiName,
@@ -425,14 +499,13 @@
     const timeForm = $("#search_time_form")[0];
     const seaerchFormData = new FormData(timeForm);
     for (let [key, value] of seaerchFormData) {
-      console.log(1, key, value);
       sendData[key] = value;
     }
 
     const form = $("#device_list_form")[0];
     const formData = new FormData(form);
 
-    sendData["Device_list"] =formData.getAll("Device_list")
+    sendData["Device_list"] = formData.getAll("Device_list");
 
     objSendData.Data = sendData;
     let url = baseApiUrl + "/api/History/GetHistoryData";
@@ -440,7 +513,6 @@
       url,
       objSendData,
       function (res) {
-        console.log(res);
         if (res && res.code == "0000") {
           loadTable(res.data.items);
         }
@@ -559,10 +631,11 @@
 
     const form = $("#device_list_form")[0];
     const formData = new FormData(form);
-    sendData["Device_list"] =formData.getAll("Device_list");
+    sendData["Device_list"] = formData.getAll("Device_list");
-    sendData["Building_tag_list"] = [...new Set(sendData["Device_list"].map((d) => d.split("_")[1]))],
+    (sendData["Building_tag_list"] = [
-
+      ...new Set(sendData["Device_list"].map((d) => d.split("_")[1])),
-    objSendData.Data = sendData;
+    ]),
+      (objSendData.Data = sendData);
 
     $.ajax({
       type: "POST",
@@ -600,21 +673,23 @@
     // }, "POST",true).send();
   }
 
-
+  var editGuid = "";
-  var editGuid = "";  
   var favorite_setting = [];
   function openModal(favorite_guid) {
     console.log(favorite_guid);
     editGuid = "";
-    if(favorite_guid){     
+    if (favorite_guid) {
-      $("#favoriteName").val(favorite_setting.find((d)=>d.favorite_guid===favorite_guid).favorite_name);
+      $("#favoriteName").val(
+        favorite_setting.find((d) => d.favorite_guid === favorite_guid)
+          .favorite_name
+      );
       editGuid = favorite_guid;
     }
-    $('#favoriteModal').modal('show');
+    $("#favoriteModal").modal("show");
   }
 
-  function closeModal(){
+  function closeModal() {
-    $('#favoriteModal').modal('hide');
+    $("#favoriteModal").modal("hide");
   }
 
   async function addFavorite() {
@@ -630,7 +705,7 @@
       method: "POST",
       headers: {
         Authorization: "Bearer " + token,
-        "Content-Type": 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         favorite_name: favoriteFormData.get("favoriteName"),
@@ -642,8 +717,8 @@
     });
 
     const res = await json.json();
-    if(res&&res.code=="0000"){
+    if (res && res.code == "0000") {
-      getFavorite()
+      getFavorite();
     }
   }
 
@@ -656,7 +731,7 @@
       method: "POST",
       headers: {
         Authorization: "Bearer " + token,
-        "Content-Type": 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         favorite_name: favoriteFormData.get("favoriteName"),
@@ -664,8 +739,8 @@
       }),
     });
     const res = await json.json();
-    if(res&&res.code=="0000"){
+    if (res && res.code == "0000") {
-      getFavorite()
+      getFavorite();
     }
   }
 
@@ -677,7 +752,7 @@
         method: "POST",
         headers: {
           Authorization: "Bearer " + token,
-          "Content-Type": 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           favorite_guid,
@@ -685,23 +760,24 @@
       }
     );
     const res = await json.json();
-    if(res&&res.code=="0000"){
+    if (res && res.code == "0000") {
-      getFavorite()
+      getFavorite();
     }
   }
 
-  async function confirmModal(){
+  async function confirmModal() {
-    console.log(editGuid)
+    console.log(editGuid);
-    if(editGuid){
+    if (editGuid) {
-      editFavorite(editGuid)
+      editFavorite(editGuid);
+    } else {
+      addFavorite();
     }
-    else{
+    closeModal();
-      addFavorite()
-    }
-    closeModal()
   }
 
-  document.querySelector(".confirm_modal_btn").addEventListener("click", confirmModal)
+  document
+    .querySelector(".confirm_modal_btn")
+    .addEventListener("click", confirmModal);
 
   async function getFavorite() {
     let token = cookies.get("JWT-Authorization");
@@ -709,17 +785,16 @@
       method: "POST",
       headers: {
         Authorization: "Bearer " + token,
-        "Content-Type": 'application/json'
+        "Content-Type": "application/json",
       },
     });
     const res = await json.json();
 
     let str = "";
     if (res && res.code == "0000") {
-      favorite_setting =  res.data;
+      favorite_setting = res.data;
-      res.data.forEach(
+      res.data.forEach((d) => {
-        (d) => {
+        str += `
-          str += `
         <div class="d-flex justify-content-between align-items-center px-2" >
                 <button class="dropdown-item p-2" data-function="show" data-favorite="${d.favorite_guid}" style="width: 150px">${d.favorite_name}</button>
                 <span class="d-flex">
@@ -732,9 +807,8 @@
                 </span>
               </div>
         `;
-        }
+      });
-      );
+      str += `     <div class="dropdown-divider"></div>
-      str+=`     <div class="dropdown-divider"></div>
               <div
                 class="dropdown-item d-flex justify-content-between align-items-center px-2"
               >
@@ -746,38 +820,43 @@
                 >
                   新增
                 </button>
-              </div>`
+              </div>`;
-      
+
-     $(".favorite_dropdown").html(str);
+      $(".favorite_dropdown").html(str);
     }
   }
 
-  function getDataFromFavorite(data){
+  function getDataFromFavorite(data) {
-    console.log(data)
+    console.log(data);
-    const dev = data.device_list.map(d=>d.split("_")[1]);
+    const dev = data.device_list.map((d) => d.split("_")[1]);
-    const checkBui = device_list.map(({device_list, building_tag})=>({
+    const checkBui = device_list.map(({ device_list, building_tag }) => ({
       building_tag,
-      builing_check: dev.filter(b=>b===building_tag).length === device_list.length
+      builing_check:
-    }))
+        dev.filter((b) => b === building_tag).length === device_list.length,
+    }));
 
-    checkBui.forEach(({building_tag, builing_check})=>{
+    checkBui.forEach(({ building_tag, builing_check }) => {
-      if(builing_check){
+      if (builing_check) {
-        $(`[name="bui_selected"][data-building="${building_tag}"]`)[0].checked = true
+        $(
-      }else{
+          `[name="bui_selected"][data-building="${building_tag}"]`
-        $(`[name="bui_selected"][data-building="${building_tag}"]`)[0].checked = false
+        )[0].checked = true;
+      } else {
+        $(
+          `[name="bui_selected"][data-building="${building_tag}"]`
+        )[0].checked = false;
       }
-    })
+    });
 
-    $('[name="Device_list"]').each((i, e)=>{
+    $('[name="Device_list"]').each((i, e) => {
-      if(data.device_list.includes(e.dataset.device)){
+      if (data.device_list.includes(e.dataset.device)) {
-      e.checked = true;
+        e.checked = true;
-      }else{
+      } else {
-      e.checked = false;
+        e.checked = false;
       }
-    })
+    });
     pageAct.devicePoiName = data.points;
     pageAct.Type = data.type;
-    selectSub(null, data.device_name_tag)
+    selectSub(null, data.device_name_tag);
     const elems = $("[data-point]");
     elems.each((i, e) => {
       let pointName = e.dataset.point;
@@ -789,15 +868,21 @@
     });
   }
 
-  document.querySelector(".favorite_dropdown").addEventListener("click",(e)=>{
+  document
-    console.log(e.target, e.target.dataset)
+    .querySelector(".favorite_dropdown")
-    if(e.target.dataset.function == 'edit'){
+    .addEventListener("click", (e) => {
-      openModal(e.target.dataset.favorite)
+      console.log(e.target, e.target.dataset);
-    }else if(e.target.dataset.function == 'del') {
+      if (e.target.dataset.function == "edit") {
-      delFavorite(e.target.dataset.favorite)
+        openModal(e.target.dataset.favorite);
-    }else if(e.target.dataset.function == 'show'){
+      } else if (e.target.dataset.function == "del") {
-      console.log(favorite_setting)
+        delFavorite(e.target.dataset.favorite);
-      getDataFromFavorite(favorite_setting.find((d)=>d.favorite_guid===e.target.dataset.favorite))
+      } else if (e.target.dataset.function == "show") {
-    }
+        console.log(favorite_setting);
-  })
+        getDataFromFavorite(
+          favorite_setting.find(
+            (d) => d.favorite_guid === e.target.dataset.favorite
+          )
+        );
+      }
+    });
 </script>