ibms-MCUT/Frontend/_historyData2.html

<main id="js-page-content" role="main" class="page-content">
  <h1 class="p-2 mb-0">歷史資料</h1>

  <div class="row">
    <div class="col-sm-12 col-xl-2">
      <div class="rounded border border-white">
        <div class="d-flex position-relative py-3 px-4">
          <i
            class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"
          ></i>
          <input
            type="text"
            id="js_nested_list_filter"
            class="form-control shadow-inset-1 pl-6 border-success"
            placeholder="輸入兩字以上"
          />
        </div>
        <!-- nav-menu-reset will reset the font colors -->
        <form id="device_list_form" class="w-100">
          <!-- <ul id="js_nested_list"
            class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
            data-nav-accordion="true"></ul> -->
          <div id="accordion" class="js_nested_list"></div>
        </form>
        <div
          class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"
        ></div>
      </div>
    </div>
    <div class="col-sm-12 col-xl-10">
      <div class="row bg-dark p-2">
        <!-- 改放小類 -->
        <div class="py-2 col-12" id="his_building">
          <div
            class="item btn-group btn-group-toggle"
            data-toggle="buttons"
          ></div>
        </div>
        <div class="col-12 mt-2">
          <div id="devPointsList" class="btn-group"></div>
        </div>
      </div>
      <div class="row bg-dark p-2 mb-5 align-items-center">
        <div class="col-auto">
          <div class="btn-group">
            <button
              type="button"
              onclick="setDateType(1, this)"
              class="btn btn-secondary waves-effect waves-themed active"
            >
              日期
            </button>
            <button
              type="button"
              onclick="setDateType(2, this)"
              class="btn btn-secondary waves-effect waves-themed"
            >
              時間
            </button>
          </div>
        </div>

        <div class="col-auto">
          <form id="search_time_form" class="form-group d-flex">
            <div class="d-flex">
              <input
                class="form-control flatpickr flatpickr-input selectDate mr-1"
                id="his_startdate"
                data-val=""
                type="date"
                name="Start_date"
                value=""
              />

              <input
                class="form-control flatpickr flatpickr-input selectTime"
                id="his_startTime"
                data-val=""
                type="text"
                name="Start_time"
                value=""
              />
            </div>
            <div class="d-flex ml-4">
              <input
                class="form-control flatpickr flatpickr-input selectDate mr-1"
                id="his_enddate"
                type="date"
                data-val=""
                name="End_date"
                value=""
              />
              <input
                class="form-control flatpickr flatpickr-input selectTime"
                id="his_endTime"
                data-val=""
                type="text"
                name="End_time"
                value=""
              />
            </div>
          </form>
        </div>
        <div class="col-auto d-flex">
          <a href="#" onclick="getData()" class="btn btn-info mr-2">查詢</a>
          <a
            href="#"
            onclick="exportExcel()"
            class="btn btn-info waves-effect waves-themed mr-2"
          >
            <span class="fal fa-file-excel mr-1"></span>
            匯出
          </a>
          <div class="dropdown">
            <button
              class="btn btn-info waves-effect waves-themed dropdown-toggle"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              id="favoriteDropdownMenu"
            >
              常用組合
            </button>
            <div
              class="dropdown-menu favorite_dropdown"
              aria-labelledby="favoriteDropdownMenu"
            >

         
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="frame-wrap">
          <table
            id="historyTable2"
            class="table table-bordered table-striped text-center m-0 w-100"
          ></table>
        </div>
      </div>
    </div>
  </div>

  <!-- 常用清單 -->
  <div
    class="modal fade"
    id="favoriteModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="favoriteModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="favoriteModalLabel">新增/編輯常用清單</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="favoriteForm">
            <div class="form-group">
              <label for="favoriteName">名稱</label>
              <input
                type="text"
                class="form-control"
                id="favoriteName"
                name="favoriteName"
                placeholder="名稱"
              />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            關閉
          </button>
          <button type="button" class="btn btn-primary confirm_modal_btn" >確認</button>
        </div>
      </div>
    </div>
  </div>
</main>
<style>
  .flatpickr-monthDropdown-month {
    color: black !important;
  }
</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 = [];
  $(function () {
    flatpickr(".selectDate", {
      locale: "zh_tw",
      dateFormat: "Y-m-d",
    });

    flatpickr(".selectTime", {
      locale: "zh_tw",
      enableTime: true,
      noCalendar: true,
      dateFormat: "H:i",
      time_24hr: true,
    });

    setDateType(1, $(`[onclick="setDateType(1, this)"]`));
    initList();
    getFavorite();

    loadTable(null);
  });

  function initList() {
    let sendData = {
      building_tag: pageAct.buiTag,
    };
    objSendData.Data = sendData;
    let url = baseApiUrl + "/api/History/GetMainSub";
    function success(res) {
      let strHtml = ``;
      let i1 = null,
        i2 = null,
        first = true;

      let buiHtml = "";
      $.each(res.data.history_Main_Systems, function (index, val) {
        $.each(val.history_Sub_systems, function (index2, val2) {
          i2 = val2.device != null && i2 == null ? index2 : null;

          buiHtml += `<label class="btn btn-secondary">
                        <input type="radio" name="subRadio" id="radio-${val2.sub_system_tag}" value="${val2.sub_system_tag}" onchange="selectSub(this, '${val2.sub_system_tag}')"> ${val2.full_name}
                          </label>`;
        });
      });

      $("#his_building").find(".item").empty();
      $("#his_building").find(".item").append(buiHtml);
      if ($("#his_building .item label").first())
        $("#his_building .item input[type='radio']").first().click();
    }
    $(loadEle).Loading("close");
    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
  }

  // 取得sub
  async function selectSub(e, sub) {
    console.log("selected sub", sub);
    let result = false;
    let subRadios = $("[name=subRadio]:checked");
    subTag = null;
    if (subRadios && subRadios.length > 0) {
      $("[name=subRadio]").parent().removeClass("btn-info");
      $("[name=subRadio]").parent().addClass("btn-secondary");
      $("[name=subRadio]:checked").parent().removeClass("btn-secondary");
      $("[name=subRadio]:checked").parent().addClass("btn-info");
      subTag = subRadios.val(); //sub tag
      pageAct.selectedSub = 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];
      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))
        }

        $('[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">
    <div class="card-header px-5" id="bui_${building.building_tag}">
      <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}">
      <p class="h6 mb-0" data-toggle="collapse" data-target="#collapse_${building.building_tag}" aria-expanded="false" aria-controls="collapse_${building.building_tag}">
        ${building.building_name}
      </p>
    </div>

    <div id="collapse_${building.building_tag}" class="collapse" aria-labelledby="heading_${building.building_tag}" data-parent="#accordion">
      <div class="card-body">        
        <ul class="list-group">
        ${innerHtml}
        </ul>
      </div>
    </div>
  </div>`;
      });

      $(".js_nested_list").html(strHtml);
      $(`[name="Device_list"]`).first().click();
      devPointsList();
    }
    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
  }

  function devPointsList() {
    // 從form取得目前的設備列表
    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"
          ? [formData.get("Device_list")]
          : formData.get("Device_list"),
    };
    objSendData.Data = sendData;
    let url = baseApiUrl + "/api/History/GetAllDevPoi";
    function success(res) {
      let strHtml = ``;

      $.each(res.data, function (index, val) {
        if (index == 0) {
          strHtml += `<button onClick="setValue(null, null, '${
            val.points
          }', this)" type="button" class="btn btn-info waves-effect waves-themed" data-point="${
            val.points
          }">${val.full_name || val.points}</button>`;
          pageAct.devicePoiName = [val.points];
        } else {
          strHtml += `<button onClick="setValue(null, null, '${
            val.points
          }', this)" type="button" class="btn btn-secondary waves-effect waves-themed"  data-point="${
            val.points
          }">${val.full_name || val.points}</button>`;
        }
      });
      // $("[data-point]").first().click();
      $("#devPointsList").html(strHtml);
      $("[name='Start_date']").val(moment().format("YYYY-MM-DD"));
      $("[name='Start_time']").val(
        moment().set("hour", 0).set("minute", 0).format("HH:mm")
      );
      $("[name='End_date']").val(moment().format("YYYY-MM-DD"));
      $("[name='End_time']").val(
        moment().set("hour", 23).set("minute", 59).format("HH:mm")
      );
      if (hisFirst) {
        getData();
      }
    }
    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
  }

  function getData(e) {
    e?.preventDefault();
    // $(loadEle)?.Loading?.("start");
    let sendData = {
      Type: pageAct.dateType,
      Points: pageAct.devicePoiName,
    };
    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")

    objSendData.Data = sendData;
    let url = baseApiUrl + "/api/History/GetHistoryData";
    ytAjax = new YourTeam.Ajax(
      url,
      objSendData,
      function (res) {
        console.log(res);
        if (res && res.code == "0000") {
          loadTable(res.data.items);
        }
      },
      function (res) {
        $(loadEle).Loading("close");
      },
      "POST",
      true
    ).send();
  }

  function setValue(deviceNumber, deviceName, devPoi, elem) {
    const elems = $("[data-point]");
    if (pageAct.devicePoiName.includes(devPoi)) {
      pageAct.devicePoiName = pageAct.devicePoiName.filter((p) => p !== devPoi);
    } else {
      pageAct.devicePoiName = [...pageAct.devicePoiName, devPoi];
    }
    elems.each((i, e) => {
      let pointName = e.dataset.point;
      if (pageAct.devicePoiName.includes(pointName)) {
        $(e).removeClass("btn-secondary").addClass("btn-info");
      } else {
        $(e).removeClass("btn-info").addClass("btn-secondary");
      }
    });
  }

  function setDateType(type, elem) {
    console.log(type);
    pageAct.dateType = type;
    $(elem).parent().children().removeClass("btn-info active");
    $(elem).addClass("btn-info active");

    if (type === 1) {
      $(".selectTime").css("display", "none");
    } else if (type === 2) {
      $(".selectTime").css("display", "block");
    }
  }

  function loadTable(data) {
    if (historyTable2) {
      historyTable2.clear().draw();
      historyTable2.destroy();
      $("#historyTable2").empty();
    }
    console.log("2", data);
    if (data) {
      let tag = "#historyTable2";

      let column_defs = [
        { targets: [0], width: "20%", sortable: true },
        { targets: [1], width: "20%", sortable: true },
        { targets: [2], width: "20%", sortable: true },
        { targets: [3], width: "20%", sortable: true },
        { targets: [4], width: "20%", sortable: true },
      ];

      let columns = [
        {
          title: "廠區",
          data: "building_name",
        },

        {
          title: "設備名稱",
          data: "device_name",
        },
        {
          title: "類別",
          data: "points",
        },
        {
          title: "數值",
          data: "value",
        },
        {
          title: "紀錄時間",
          data: "timestamp",
        },
      ];

      historyTable2 = new YourTeam.JqDataTables.getTableByStatic(
        tag,
        data,
        columns,
        column_defs,
        null,
        null,
        null,
        null,
        "tpi"
      );

      $(tag).DataTable().order([4, "desc"]);
      $(loadEle)?.Loading?.("close");
    }
  }

  function exportExcel() {
    $(loadEle).Loading("start");
    let token = cookies.get("JWT-Authorization");
    let url = baseApiUrl + "/api/ExportHistoryExcel";
    let sendData = {
      Type: pageAct.dateType,
      Points: pageAct.devicePoiName,
    };
    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")
    objSendData.Data = sendData;

    $.ajax({
      type: "POST",
      url: url,
      data: JSON.stringify(objSendData.Data),
      aysnc: true,
      headers: {
        Authorization: "Bearer " + token,
      },
      contentType: "application/json; charset=utf-8",
      xhrFields: {
        responseType: "blob", // to avoid binary data being mangled on charset conversion
      },
      success: function (rel, text, xhr) {
        if (rel) {
          downloadByBlob(xhr, rel);
        }
        $(loadEle).Loading("close");
      },
      error: function () {
        $(loadEle).Loading("close");
      },
      complete: (xhr) => {
        setLoading(false);
      },
    });
    // ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
    //     $(loadEle).Loading("close");
    // }, function (rel) {
    //     if (rel) {
    //        downloadByBlob(xhr, rel);
    //     }

    //     $(loadEle).Loading("close");
    // }, "POST",true).send();
  }


  var editGuid = "";  
  var favorite_setting = [];
  function openModal(favorite_guid) {
    console.log(favorite_guid);
    editGuid = "";
    if(favorite_guid){     
      $("#favoriteName").val(favorite_setting.find((d)=>d.favorite_guid===favorite_guid).favorite_name);
      editGuid = favorite_guid;
    }
    $('#favoriteModal').modal('show');
  }

  function closeModal(){
    $('#favoriteModal').modal('hide');
  }

  async function addFavorite() {
    let token = cookies.get("JWT-Authorization");
    const form = $("#device_list_form")[0];
    const formData = new FormData(form);
    Device_list = formData.getAll("Device_list");

    const favoriteForm = $("#favoriteForm")[0];
    const favoriteFormData = new FormData(favoriteForm);

    const json = await fetch(baseApiUrl + "/api/History/SaveHistoryFavorite", {
      method: "POST",
      headers: {
        Authorization: "Bearer " + token,
        "Content-Type": 'application/json'
      },
      body: JSON.stringify({
        favorite_name: favoriteFormData.get("favoriteName"),
        device_name_tag: $("[name=subRadio]:checked").val(),
        Type: pageAct.dateType,
        Points: pageAct.devicePoiName,
        Device_list,
      }),
    });

    const res = await json.json();
    if(res&&res.code=="0000"){
      getFavorite()
    }
  }

  async function editFavorite(favorite_guid) {
    let token = cookies.get("JWT-Authorization");
    const favoriteForm = $("#favoriteForm")[0];
    const favoriteFormData = new FormData(favoriteForm);

    const json = await fetch(baseApiUrl + "/api/History/EditHistoryFavorite", {
      method: "POST",
      headers: {
        Authorization: "Bearer " + token,
        "Content-Type": 'application/json'
      },
      body: JSON.stringify({
        favorite_name: favoriteFormData.get("favoriteName"),
        favorite_guid,
      }),
    });
    const res = await json.json();
    if(res&&res.code=="0000"){
      getFavorite()
    }
  }

  async function delFavorite(favorite_guid = "") {
    let token = cookies.get("JWT-Authorization");
    const json = await fetch(
      baseApiUrl + "/api/History/DeleteHistoryFavorite",
      {
        method: "POST",
        headers: {
          Authorization: "Bearer " + token,
          "Content-Type": 'application/json'
        },
        body: JSON.stringify({
          favorite_guid,
        }),
      }
    );
    const res = await json.json();
    if(res&&res.code=="0000"){
      getFavorite()
    }
  }

  async function confirmModal(){
    console.log(editGuid)
    if(editGuid){
      editFavorite(editGuid)
    }
    else{
      addFavorite()
    }
    closeModal()
  }

  document.querySelector(".confirm_modal_btn").addEventListener("click", confirmModal)

  async function getFavorite() {
    let token = cookies.get("JWT-Authorization");
    const json = await fetch(baseApiUrl + "/api/History/GetHistoryFavorite", {
      method: "POST",
      headers: {
        Authorization: "Bearer " + token,
        "Content-Type": 'application/json'
      },
    });
    const res = await json.json();

    let str = "";
    if (res && res.code == "0000") {
      favorite_setting =  res.data;
      res.data.forEach(
        (d) => {
          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">
                  <button class="btn btn-link px-2" data-favorite="${d.favorite_guid}">
                    <i class="fas fa-pencil-alt text-info mr-1" data-function="edit" data-favorite="${d.favorite_guid}"></i>
                  </button>
                <button  class="btn btn-link px-2" data-favorite="${d.favorite_guid}">
                  <i class="fas fa-times text-danger"  data-function="del" data-favorite="${d.favorite_guid}"></i>
                  </button>
                </span>
              </div>
        `;
        }
      );
      str+=`     <div class="dropdown-divider"></div>
              <div
                class="dropdown-item d-flex justify-content-between align-items-center px-2"
              >
                <button
                  class="text-center btn btn-info btn-block"
                  type="button"
                  data-toggle="modal"
                  data-target="#favoriteModal"
                >
                  新增
                </button>
              </div>`
      
     $(".favorite_dropdown").html(str);
    }
  }

  function getDataFromFavorite(data){
    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
    }))

    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(data.device_list.includes(e.dataset.device)){
      e.checked = true;
      }else{
      e.checked = false;
      }
    })
    pageAct.devicePoiName = data.points;
    pageAct.Type = data.type;
    selectSub(_, data.device_name_tag)
    const elems = $("[data-point]");
    elems.each((i, e) => {
      let pointName = e.dataset.point;
      if (pageAct.devicePoiName.includes(pointName)) {
        $(e).removeClass("btn-secondary").addClass("btn-info");
      } else {
        $(e).removeClass("btn-info").addClass("btn-secondary");
      }
    });
  }

  document.querySelector(".favorite_dropdown").addEventListener("click",(e)=>{
    console.log(e.target, e.target.dataset)
    if(e.target.dataset.function == 'edit'){
      openModal(e.target.dataset.favorite)
    }else if(e.target.dataset.function == 'del') {
      delFavorite(e.target.dataset.favorite)
    }else if(e.target.dataset.function == 'show'){
      getDataFromFavorite(favorite_setting.find((d)=>d.favorite_guid===e.target.dataset.favorite))
    }
  })
</script>