ibms-MCUT/Frontend/_alert.html

<main id="js-page-content" role="main" class="page-content">
    <div class="row">
        <div class="col-sm-12 col-xl-12">
            <h1 class="p-2 mb-0">即時告警</h1>
            <div class="row bg-dark p-2">
                <div class="col-auto">
                    <div class="btn-group">
                        <button id="returnFalse" onclick="setReturn(false)" type="button" class="btn btn-secondary waves-effect waves-themed">未復歸</button>
                        <button id="returnTrue" onclick="setReturn(true)" type="button" class="btn btn-secondary waves-effect waves-themed">已復歸</button>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="btn-group">
                        <button id="unconfirmed" onclick="setConfirm(false)" type="button" class="btn btn-secondary waves-effect waves-themed">未確認</button>
                        <button id="confirmed" onclick="setConfirm(true)" type="button" class="btn btn-secondary waves-effect waves-themed">已確認</button>
                    </div>
                </div>
                <div class="col-auto">
                    <a href="#" id="nearthirty" class="btn btn-secondary">近30天</a>
                </div>
                <div class="col-auto">
                    <div class="form-group">
                        <input class="form-control" id="startdate" data-val="" type="date" name="startdate" value="" style="cursor: pointer">
                    </div>
                </div>
                <div class="col-auto">
                    <div class="form-group">
                        <input class="form-control" id="enddate" data-val="" type="date" name="enddate" value="" style="cursor: pointer">
                    </div>
                </div>
                <hr>

            </div>
            <div class="row bg-dark p-2 mb-5">
                <div class="col-auto">
                    <a href="#" onclick="selAll()" class="btn btn-secondary">全部類別</a>
                </div>
                <div class="col-auto">
                    <a href="#" class="btn btn-secondary">空調</a>
                </div>
            </div>

            <div class="row">
                <div class="frame-wrap">
                    <table class="table table-bordered table-striped text-center m-0">
                        <thead class="thead-themed">
                            <tr>
                                <th>棟別-樓層</th>
                                <th>異常ID</th>
                                <th>發生時間</th>
                                <th>異常類別</th>
                                <th>設備編號</th>
                                <th>異常原因</th>
                                <th>Ack 確認</th>
                                <th>派工/維運單號</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>板橋-19F</td>
                                <td>ER20210630001</td>
                                <td>2022-08-01 09:36</td>
                                <td>照明故障</td>
                                <td>s02101000101</td>
                                <td>照明設備 LA01 故障</td>
                                <td><a href="#" class="btn btn-warning">未確認</a></td>
                                <td>Op0004</td>
                            </tr>
                            <tr>
                                <td>板橋-19F</td>
                                <td>ER20210630001</td>
                                <td>2022-08-01 09:36</td>
                                <td>照明故障</td>
                                <td>s02101000101</td>
                                <td>照明設備 LA01 故障</td>
                                <td><a href="#" class="btn btn-warning">未確認</a></td>
                                <td><a href="#" class="btn btn-info">+ 維修單</a></td>
                            </tr>
                            <tr>
                                <td>板橋-19F</td>
                                <td>ER20210630001</td>
                                <td>2022-08-01 09:36</td>
                                <td>照明故障</td>
                                <td>s02101000101</td>
                                <td>照明設備 LA01 故障</td>
                                <td><a href="#" class="btn btn-info">確認</a></td>
                                <td><a href="#" class="btn btn-info">+ 維修單</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    $(function () {
        $('#nearthirty').click();
        setReturn(false);
        setConfirm(false);

        event();
    });

    function event() {
        onEvent('click', '#nearthirty', function () {
            let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
            let thirtyDays = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 30)), "date").replaceAll('/', '-');
            $('#startdate').val(thirtyDays);
            $('#startdate').data('val', thirtyDays);
			$('#enddate').val(today);
            $('#enddate').data('val', today);
            if (!$(this).hasClass('btn-info'))
                elemSelCol($(this));
        });

        onEvent('change', '#startdate, #enddate', function () {
            if ($('#startdate').val() > $('#enddate').val()) {
                $('#startdate').val($('#startdate').data('val'));
                $('#enddate').val($('#enddate').data('val'));
                toast_error('不可選擇大於結束時間');
            }
            else {
                let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
                let enddate = displayDate(new Date(new Date().setDate(new Date($('#enddate').val()).getDate() - 30)), "date").replaceAll('/', '-');
                let startdate = $('#startdate').val();
                if (enddate == startdate && $('#enddate').val() == today) {
                    $('#nearthirty').click();
                }
                else {
					$('#nearthirty').removeClass('btn-info');
					$('#nearthirty').addClass('btn-secondary');
				}

                $('#startdate').data('val', $('#startdate').val());
				$('#enddate').data('val', $('#enddate').val());
			}
        });
    }

    function setReturn(bool) {
        pageAct.return = bool;
		$('#returnFalse').removeClass('btn-info');
		$('#returnTrue').removeClass('btn-info');
        if (!bool) {
            $('#returnFalse').removeClass('btn-secondary');
            $('#returnFalse').addClass('btn-info');
			$('#returnTrue').addClass('btn-secondary');
        }
        else {
			$('#returnTrue').removeClass('btn-secondary');
            $('#returnTrue').addClass('btn-info');
			$('#returnFalse').addClass('btn-secondary');
		}
    }

    function setConfirm(bool) {
        pageAct.confirm = bool;
        $('#unconfirmed').removeClass('btn-info');
		$('#confirmed').removeClass('btn-info');
        if (!bool) {
            $('#unconfirmed').removeClass('btn-secondary');
            $('#unconfirmed').addClass('btn-info');
			$('#confirmed').addClass('btn-secondary');
        }
        else {
			$('#confirmed').removeClass('btn-secondary');
            $('#confirmed').addClass('btn-info');
			$('#unconfirmed').addClass('btn-secondary');
		}
	}

    function elemSelCol(elem) {
        if (elem.hasClass('btn-secondary')) {
			$(elem).removeClass('btn-secondary');
            $(elem).addClass('btn-info');
        }
        else if (elem.hasClass('btn-info')) {
			$(elem).removeClass('btn-info');
			$(elem).addClass('btn-secondary');
		}
	}
</script>