ibms-dome/Frontend/js/site.js

$(function () {
    $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
        setDropdownItem(value)
    })

})

/** 
 * fn 定義 | 手動初始化 Bootstrap dropdown select 
 */
$.fn.droSetItem = function () {
    setDropdownItem(this);
    return this;
}
/** 
 * fn 定義 | 輸出含原元素 html
 */
$.fn.outerHtml = function () {
    return $(this).prop("outerHTML");
}

/**
 * 設置 bootstrap dropdown 為下拉選單 
 * @param {any} menuEle .dropdown-menu element
 */
function setDropdownItem(menuEle) {
    if ($(menuEle).find(".dropdown-item.active").length == 0) {
        $(menuEle).find(".dropdown-item").first().addClass("active");
    }

    let actText = $(menuEle).find(".dropdown-item.active").first().text();
    let actEleId = $(menuEle).prop("id");
    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);

    /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));

    //點選選項 add active class
    onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
        $(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
        $(this).addClass("active");
        setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
    })
}

/**
 * 預設設備圖像
 * @param {any} obj
 */
function defDev(obj) {
    let defSrc = 'img/defdev.png';
    obj.src = defSrc;
}

function dtAjaxResetSendData(table,sendData) {
    table.context[0].ajax.data = function (d) {
        d = sendData;
        return JSON.stringify(d)
    }
}

/**
 * element 建造 
 * @param {any} text
 * @param {any} id
 * @param {any} name
 * @param {any} cls
 * @param {any} data
 * @param {any} attr
 */
function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
    id = id ? `id="${id}"` : "";
    name = name ? `name="${name}"` : "";
    cls = cls.length != 0 ? `class="${cls.join(' ')}"` : "";
    data = data.length != 0 ? `${Object.keys(data).map(x => `data-${x}="${data[x]}"`).join(" ")}` : "";
    attr = attr ? `${Object.keys(attr).map(x => `${x}="${attr[x]}"`).join(" ")}` : "";
    let attrArr = [], attrText = "";
    attrArr = [id, name, cls, data, attr];
    attrText = attrArr.filter(x => x != "").join(" ");
    text = text === null ? "" : text;
    return { attrText: attrText, text: text };
}

function creEle(ele, text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    let comp = eleBuild(text, id, name, cls, data, attr);
    return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
}

function creDiv(cls = [], attr = {}, id = null, name = null, data = {}, text = null) {
    return creEle("div", text, id, name, cls, data, attr);
}

function creBtn(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    return creEle("button", text, id, name, cls, data, attr);
}

function creBtnHtml(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
}

function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text = null) {
    return creEle("select", text, id, name, cls, data, attr);
}

function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
    attr = value != null ? attr.value = value : attr;
    return creEle("option", text, id, name, cls, data, attr);
}

class ElevatorHandler {
    constructor(ele, option = {}) {
        this.ele = ele;
        this.eleId = "";
        this.eleWra = $("<div></div>");
        this.speed = 0.3;
        this.monStatus = 0;  // 0=no 1=up 2=down
        this.floorHeight = typeof option.fHeight == "undefined" ? 50 : option.fHeight;
        this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
        this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
        this.elevators = typeof option.elevators == "undefined" ? [{ id: "elevator01" }] : option.elevators;
        this.curElevFloor = typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
        this.setTimeout = null;
        this.init();
    }

    init = function () {
        this.setTabWra();
        this.setTabFloor();
        if (Object.keys(this.curElevFloor).length != 0) { 
            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
                this.setElevFloor(elevKey,this.curElevFloor[elevKey]);

            })
        }
    }

    // 設置 wrapper
    setTabWra = function () {
        let id = $(this.ele).prop("id");
        this.eleId = id;
        if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
            $(this.ele).unwrap(".elevator-table-wrapper");
        }
        let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
        $(this.ele).wrap(wrapper);
        this.eleWra = wrapper;
    }

    // 設置 table 樓層
    setTabFloor = function () {
        let _w = this.floorWidth, _h = this.floorHeight;
        let thead = creEle("thead"), tbody = creEle("tbody");
        let _floors = this.floors, _ele = this.ele, _elevators = this.elevators;
        //樓層從小到大
        _floors = _floors.oSort("sort").reverse().map(x => x.name);

        let theadTr = creEle("tr");
     
        for (let e = 1; e <= _elevators.length + 2; e++) {
            let th = creEle("th");
            th.css({ "width": `${_w}px`, "height": `${_h}px` });
            if (e != 1 && e != _elevators.length + 2) {
                let elevId = _elevators[e - 2].id;
                // 電梯方框
                let span = creEle("span", null, "elevator-item-" + (elevId), null, ["elevator-item"]);
                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
                th.append(span);
            }
            theadTr.append(th);
        }
        thead.css("position", "absolute");
        thead.append(theadTr);

        //樓層表格建置 tbody
        for (let f = 1; f <= _floors.length; f++) {
            let tr = creEle("tr");
            
            for (let e = 1; e <= _elevators.length + 2; e++) {
                let td = creEle("td");
                td.css({ "width": `${_w}px`, "height": `${_h}px` });
                if (e == 1) {
                    td.addClass("t-black")
                    td.text(_floors[f - 1]);
                } else if (e == _elevators.length + 2) {
                }
                else {
                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
                    td.append(div)
                }
                tr.append(td);
            }
            tbody.append(tr);
        }

        $(_ele).append(thead);
        $(_ele).append(tbody);

        //表格外圍無框線
        $(_ele).find("tbody tr").each((index, tr) => {

            $(tr).find("td:eq(0)").css("border-left", "0");
            $(tr).find("td:eq(-1)").css("border-right", "0");

            if (index == 0) {
                $(tr).find("td").each((index, td) => {
                    $(td).css("border-top", "0");
                })
            } else if (index == $("#floorTable tbody tr").length - 1) {
                $(tr).find("td").each((index, td) => {
                    $(td).css("border-bottom", "0");
                })
            }
        })

    }

    setElevFloor = function (elevId, floId) {
        let curFloId = this.curElevFloor[elevId];
        let curSort = this.floors.filter(x => x.id == curFloId).map(x => x.sort)[0];
        let tarSort = this.floors.filter(x => x.id == floId).map(x => x.sort)[0];
        let gapFloor = tarSort - curSort;
        clearTimeout(this.setTimeout); 
            console.log(this.movStatus)
        if (this.movStatus != 0) { 
            $(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0, 0, 0.62, 1) 0s`);
        }
        if (gapFloor < 0) {
            this.movStatus = 2;
        } else if (gapFloor > 0) {
            this.movStatus = 1;
        } else {
            this.movStatus = 0;
        }
        this.setTimeout = setTimeout(() => {
            this.movStatus = 0;
            $(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`)
        }, (1 / this.speed) * 1000)
        $(`#elevator-item-${elevId}`).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
    }


    setCurElevFloor = function (elevId,floId) {
        this.curElevFloor[elevId] = floId;
    }

    redraw = function () {
        $(this.ele).empty();
        this.setTabFloor();
    }
    
}