Merge branch 'MCUT' of https://gitea.mjm-staging.developers-homelab.net/mjm-group/ibms into MCUT

Frontend/_historyData2.html

@@ -124,10 +124,7 @@
             <div
               class="dropdown-menu favorite_dropdown"
               aria-labelledby="favoriteDropdownMenu"
-            >
+            ></div>
-
-         
-            </div>
           </div>
         </div>
       </div>
@@ -176,6 +173,7 @@
                 name="favoriteName"
                 placeholder="名稱"
               />
+              <small class="input_error_text text-danger"></small>
             </div>
           </form>
         </div>
@@ -183,7 +181,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>
@@ -195,18 +195,13 @@
   }
 </style>
 
-<script
-  src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
-  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
-  crossorigin="anonymous"
-></script>
-
 <script>
   var historyTable2 = null;
   var buildingTag = null;
   pageAct.hisBuiName = "";
   hisFirst = true;
   var device_list = [];
+  var temp_device_list = []; // 用來儲存搜尋資料的值
   $(function () {
     flatpickr(".selectDate", {
       locale: "zh_tw",
@@ -224,7 +219,6 @@
     setDateType(1, $(`[onclick="setDateType(1, this)"]`));
     initList();
     getFavorite();
-
     loadTable(null);
   });
 
@@ -273,74 +267,38 @@
       $("[name=subRadio]:checked").parent().addClass("btn-info");
       subTag = subRadios.val(); //sub tag
       pageAct.selectedSub = subTag;
+      if (e) {
         await getSidebar(subTag);
+      }
 
       result = true;
     }
     return result;
   }
 
-  
+  function showDeviceList(data) {
-  function selectAllBuildingDevice(e){    
+    temp_device_list = data;
-    if(e.target.name==='bui_selected'){
+    let strHtml = "";
-      let curData = device_list.find(({building_tag})=> e.target.dataset.building ===building_tag) 
+    let i1 = null,
-      const curBuisDev = curData.device_list.map(({device_number})=> device_number)
+      i2 = null,
-
+      first = true;
-      const form = $("#device_list_form")[0];
+    $.each(data, function (index, building) {
-      const formData = new FormData(form);    
+      let innerHtml = "";
-      let list = formData.getAll("Device_list")
+      $.each(building.device_list, function (index2, val2) {
-
+        innerHtml += ` <li class="card-header px-5 list-group-item">
-        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(res.data, function (index, building) {
-        let innerHtml = "";
-        $.each(building.device_list, function (index2, val2) {
-          innerHtml += ` <li class="card-header px-5 list-group-item">
       <input class="custom-control-input opacity-100 mx-2" style="z-index: 0" type="checkbox" name="Device_list" data-device="${val2.device_number}" value="${val2.device_number}" id="dev_${val2.device_number}">
       <p class="h6 mb-0">
         ${val2.device_name}
       </p>
      </li>`;
-        });
+      });
 
-        strHtml += ` <div class="card">
+      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>
@@ -353,9 +311,126 @@
       </div>
     </div>
   </div>`;
+    });
+
+    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;
+        }
       });
 
-      $(".js_nested_list").html(strHtml);
+      $('[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();
     }
@@ -367,8 +442,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"
@@ -415,7 +488,7 @@
 
   function getData(e) {
     e?.preventDefault();
-    // $(loadEle)?.Loading?.("start");
+    $(loadEle)?.Loading?.("start");
     let sendData = {
       Type: pageAct.dateType,
       Points: pageAct.devicePoiName,
@@ -423,14 +496,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";
@@ -438,7 +510,6 @@
       url,
       objSendData,
       function (res) {
-        console.log(res);
         if (res && res.code == "0000") {
           loadTable(res.data.items);
         }
@@ -557,8 +628,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");
-    objSendData.Data = sendData;
+    (sendData["Building_tag_list"] = [
+      ...new Set(sendData["Device_list"].map((d) => d.split("_")[1])),
+    ]),
+      (objSendData.Data = sendData);
 
     $.ajax({
       type: "POST",
@@ -596,24 +670,27 @@
     // }, "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');
+    $("#favoriteName").val("");
+    $("#favoriteModal").modal("hide");
   }
 
   async function addFavorite() {
+    $(".input_error_text").text("");
     let token = cookies.get("JWT-Authorization");
     const form = $("#device_list_form")[0];
     const formData = new FormData(form);
@@ -621,25 +698,36 @@
 
     const favoriteForm = $("#favoriteForm")[0];
     const favoriteFormData = new FormData(favoriteForm);
+    const favorite_name = favoriteFormData.get("favoriteName");
 
-    const json = await fetch(baseApiUrl + "/api/History/SaveHistoryFavorite", {
+    if (favorite_name) {
-      method: "POST",
+      const json = await fetch(
-      headers: {
+        baseApiUrl + "/api/History/SaveHistoryFavorite",
-        Authorization: "Bearer " + token,
+        {
-        "Content-Type": 'application/json'
+          method: "POST",
-      },
+          headers: {
-      body: JSON.stringify({
+            Authorization: "Bearer " + token,
-        favorite_name: favoriteFormData.get("favoriteName"),
+            "Content-Type": "application/json",
-        device_name_tag: $("[name=subRadio]:checked").val(),
+          },
-        Type: pageAct.dateType,
+          body: JSON.stringify({
-        Points: pageAct.devicePoiName,
+            favorite_name,
-        Device_list,
+            device_name_tag: $("[name=subRadio]:checked").val(),
-      }),
+            Type: pageAct.dateType,
-    });
+            Points: pageAct.devicePoiName,
+            Device_list,
+          }),
+        }
+      );
 
-    const res = await json.json();
+      const res = await json.json();
-    if(res&&res.code=="0000"){
+      if (res && res.code == "0000") {
-      getFavorite()
+        getFavorite();
+        closeModal();
+      } else {
+        toast_error(res.msg || common.SysErr);
+      }
+    } else {
+      $(".input_error_text").text("請輸入名稱");
     }
   }
 
@@ -647,21 +735,32 @@
     let token = cookies.get("JWT-Authorization");
     const favoriteForm = $("#favoriteForm")[0];
     const favoriteFormData = new FormData(favoriteForm);
+    const favorite_name = favoriteFormData.get("favoriteName");
 
-    const json = await fetch(baseApiUrl + "/api/History/EditHistoryFavorite", {
+    if (favorite_name) {
-      method: "POST",
+      const json = await fetch(
-      headers: {
+        baseApiUrl + "/api/History/EditHistoryFavorite",
-        Authorization: "Bearer " + token,
+        {
-        "Content-Type": 'application/json'
+          method: "POST",
-      },
+          headers: {
-      body: JSON.stringify({
+            Authorization: "Bearer " + token,
-        favorite_name: favoriteFormData.get("favoriteName"),
+            "Content-Type": "application/json",
-        favorite_guid,
+          },
-      }),
+          body: JSON.stringify({
-    });
+            favorite_name,
-    const res = await json.json();
+            favorite_guid,
-    if(res&&res.code=="0000"){
+          }),
-      getFavorite()
+        }
+      );
+      const res = await json.json();
+      if (res && res.code == "0000") {
+        getFavorite();
+        closeModal();
+      } else {
+        toast_error(res.msg || common.SysErr);
+      }
+    } else {
+      $(".input_error_text").text("請輸入名稱");
     }
   }
 
@@ -673,7 +772,7 @@
         method: "POST",
         headers: {
           Authorization: "Bearer " + token,
-          "Content-Type": 'application/json'
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           favorite_guid,
@@ -681,23 +780,23 @@
       }
     );
     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{
-      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");
@@ -705,17 +804,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">
@@ -728,9 +826,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"
               >
@@ -742,37 +839,43 @@
                 >
                   新增
                 </button>
-              </div>`
+              </div>`;
-      
+
-     $(".favorite_dropdown").html(str);
+      $(".favorite_dropdown").html(str);
     }
   }
 
-  function getDataFromFavorite(data){
+  function getDataFromFavorite(data) {
-    const dev = data.device_list.map(d=>d.split("_")[1]);
+    console.log(data);
-    const checkBui = device_list.map(({device_list, building_tag})=>({
+    const dev = data.device_list.map((d) => d.split("_")[1]);
+    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(_, data.device_name_tag)
+    selectSub(null, data.device_name_tag);
     const elems = $("[data-point]");
     elems.each((i, e) => {
       let pointName = e.dataset.point;
@@ -784,14 +887,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") {
-      getDataFromFavorite(favorite_setting.find((d)=>d.favorite_guid===e.target.dataset.favorite))
+        delFavorite(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>