[Frontend][全域功能] navigation sidebar animate type fix
This commit is contained in:
parent
0d6870f32f
commit
5ed7dafce3
961
Frontend/_sysElevator.html
Normal file
961
Frontend/_sysElevator.html
Normal file
@ -0,0 +1,961 @@
|
|||||||
|
<style>
|
||||||
|
.elevator {
|
||||||
|
background-color:#fff;
|
||||||
|
height:520px;
|
||||||
|
}
|
||||||
|
table.elevator-build {
|
||||||
|
border: 1px double #000;
|
||||||
|
}
|
||||||
|
table.elevator-build td {
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
height: 40px;
|
||||||
|
width: 55px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
elevator .elevator-body, elevator .elevator-header {
|
||||||
|
padding: 0.7rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="d-flex">
|
||||||
|
<!-- 左圖區 -->
|
||||||
|
<div class="col-3 my-3">
|
||||||
|
|
||||||
|
<div style="position:relative ">
|
||||||
|
<div id="elevatorBlock" class="elevator">
|
||||||
|
<div class="elevator-header">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
|
||||||
|
<table id="floorTable" class="elevator-build m-auto">
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--<div>
|
||||||
|
<img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" /> -->
|
||||||
|
|
||||||
|
<div class="mt-2">
|
||||||
|
<img src="img/總公司1F平面.jpg" class="img-fluid" style="min-height: 330px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-左圖區 -->
|
||||||
|
<!-- 中間卡片區 -->
|
||||||
|
<div class="col-7 my-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
|
||||||
|
<div type="button" class="card-body" data-toggle="modal" data-target="#card1">
|
||||||
|
<span class="d-flex">
|
||||||
|
<h5 class="card-title">號機別 : 1</h5>
|
||||||
|
<i class="fas fa-caret-up fa-3x ml-auto"></i>
|
||||||
|
</span>
|
||||||
|
<h4 class="d-flex justify-content-end">10F</h4>
|
||||||
|
<span class="d-flex">
|
||||||
|
<p class="card-text">狀態 : 運行中</p>
|
||||||
|
<i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card text-white bg-danger mx-1 mb-3 col-4" style="max-width: 18rem">
|
||||||
|
<div type="button" class="card-body">
|
||||||
|
<span class="d-flex">
|
||||||
|
<h5 class="card-title">號機別 : 2</h5>
|
||||||
|
<i class="fas fa-caret-up fa-3x ml-auto"></i>
|
||||||
|
</span>
|
||||||
|
<h4 class="d-flex justify-content-end">5F</h4>
|
||||||
|
<span class="d-flex">
|
||||||
|
<p class="card-text animate__animated animate__flash animate__infinite animate__slower">
|
||||||
|
狀態 : 維修
|
||||||
|
</p>
|
||||||
|
<i class="fas fa-caret-down fa-3x ml-auto"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
|
||||||
|
<div type="button" class="card-body">
|
||||||
|
<span class="d-flex">
|
||||||
|
<h5 class="card-title">號機別 : 3</h5>
|
||||||
|
<i class="fas fa-caret-up fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
|
||||||
|
</span>
|
||||||
|
<h4 class="d-flex justify-content-end">3F</h4>
|
||||||
|
<span class="d-flex">
|
||||||
|
<p class="card-text">狀態 : 運行中</p>
|
||||||
|
<i class="fas fa-caret-down fa-3x ml-auto"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-中間卡片區 -->
|
||||||
|
<!-- 右邊功能區 -->
|
||||||
|
<div class="col-2 my-3">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="btn-group col-xxl-3 mb-2">
|
||||||
|
<button class="btn btn-info" data-toggle="modal" data-target="#staticBackdrop">
|
||||||
|
重播系統 <i class="fas fa-play"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<i type="button" class="fas fa-cog fa-2x ml-3 my-2" data-toggle="modal"
|
||||||
|
data-target="#exampleModal1"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card col-xxl-3 mt-3">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<h4>緊急回轉</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-around mt-2">
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
緊急回歸
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
未動作
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-around mt-2">
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
群控故障
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
未動作
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-around mt-2">
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
緊急電源
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
未動作
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-around mt-2">
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
火災回歸
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
未動作
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-around mt-2">
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
地震管制
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
||||||
|
未動作
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-右邊功能區 -->
|
||||||
|
<!-- Modal-Card1 -->
|
||||||
|
<div class="modal fade" id="card1" data-keyboard="false" tabindex="-1"
|
||||||
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<h5 class="modal-title" id="staticBackdropLabel">1</h5>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
|
||||||
|
title="及時狀態">
|
||||||
|
<i class="fal fa-tv fa-2x" data-toggle="modal"
|
||||||
|
data-target="#exampleModal"></i>
|
||||||
|
</a>
|
||||||
|
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
|
||||||
|
title="基本資訊">
|
||||||
|
<i class="fal fa-cog fa-2x" data-toggle="modal"
|
||||||
|
data-target="#exampleModal"></i>
|
||||||
|
</a>
|
||||||
|
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
|
||||||
|
title="異常資料">
|
||||||
|
<i class="fal fa-exclamation-triangle fa-2x" data-toggle="modal"
|
||||||
|
data-target="#exampleModal"></i>
|
||||||
|
</a>
|
||||||
|
<a type="button" class="" data-toggle="tooltip" data-placement="top"
|
||||||
|
title="運維紀錄">
|
||||||
|
<i class="fal fa-server fa-2x" data-toggle="modal"
|
||||||
|
data-target="#exampleModal"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="modal fade" id="exampleModal" tabindex="-1"
|
||||||
|
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal-ReplaySystem -->
|
||||||
|
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false"
|
||||||
|
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="staticBackdropLabel">重播系統</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<label>
|
||||||
|
播放日期 : <input type="date"> ~ <input type="date"> 時段 :
|
||||||
|
<input type="time">
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
播放速度 :
|
||||||
|
<div class="btn-group mt-2">
|
||||||
|
<button class="btn btn-info">正常</button>
|
||||||
|
<button class="btn btn-info">1.5x</button>
|
||||||
|
<button class="btn btn-info">2.0x</button>
|
||||||
|
<button class="btn btn-info">3.0x</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-info">
|
||||||
|
<i class="fas fa-play fa-1x"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="width: 85%">
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: 15%"
|
||||||
|
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 電梯圖表 -->
|
||||||
|
<div class="mt-3">
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<tbody class="text-center">
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td colspan="4">Bank1</td>
|
||||||
|
<td colspan="2">Bank2</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td colspan="2">#1</td>
|
||||||
|
<td colspan="2">#2</td>
|
||||||
|
<td colspan="2">#3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>位置/模式</td>
|
||||||
|
<td>1F</td>
|
||||||
|
<td>自動運轉</td>
|
||||||
|
<td>1F</td>
|
||||||
|
<td>自動運轉</td>
|
||||||
|
<td>4F</td>
|
||||||
|
<td>自動運轉</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>負載/狀態</td>
|
||||||
|
<td>40%</td>
|
||||||
|
<td>*</td>
|
||||||
|
<td>0%</td>
|
||||||
|
<td>*</td>
|
||||||
|
<td>80%</td>
|
||||||
|
<td>*</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>10F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>9F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>8F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>7F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>6F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>5F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>B1F</td>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>B2F</th>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>B3F</th>
|
||||||
|
<td id="elevator1-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator2-1"></td>
|
||||||
|
<td></td>
|
||||||
|
<td id="elevator3-1"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- End-電梯圖表 -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-Modal-ReplaySystem -->
|
||||||
|
<!-- Modal-ElevatorManagement -->
|
||||||
|
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||||
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th scope="col">號機</th>
|
||||||
|
<th scope="col">狀態</th>
|
||||||
|
<th scope="col">所在樓層</th>
|
||||||
|
<th scope="col">載重</th>
|
||||||
|
<th scope="col">休止</th>
|
||||||
|
<th scope="col">獨立運轉</th>
|
||||||
|
<th scope="col">VIP</th>
|
||||||
|
<th scope="col">回歸</th>
|
||||||
|
<th scope="col">不服務樓層</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>Bank1</th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th>B2F,3F,5F</th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-info" data-target="#exampleModal2"
|
||||||
|
data-toggle="modal">
|
||||||
|
<i class="fal fa-pen"> Edit</i>
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>1</th>
|
||||||
|
<th>運作中</th>
|
||||||
|
<th>3F</th>
|
||||||
|
<th>80%</th>
|
||||||
|
<th>On</th>
|
||||||
|
<th>Off</th>
|
||||||
|
<th>On</th>
|
||||||
|
<th>Off</th>
|
||||||
|
<th></th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-info" data-target="#exampleModal1-1"
|
||||||
|
data-toggle="modal">
|
||||||
|
<i class="fal fa-pen"> Edit</i>
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>2</th>
|
||||||
|
<th>保養</th>
|
||||||
|
<th>2F</th>
|
||||||
|
<th>0%</th>
|
||||||
|
<th>On</th>
|
||||||
|
<th>Off</th>
|
||||||
|
<th>On</th>
|
||||||
|
<th>Off</th>
|
||||||
|
<th></th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-info" data-target="#exampleModal1-2"
|
||||||
|
data-toggle="modal">
|
||||||
|
<i class="fal fa-pen"> Edit</i>
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>Bank2</th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th>B1F,B2F</th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-info" data-target="#exampleModal2"
|
||||||
|
data-toggle="modal">
|
||||||
|
<i class="fal fa-pen"> Edit</i>
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>3</th>
|
||||||
|
<th>運作中</th>
|
||||||
|
<th>B1F</th>
|
||||||
|
<th>100%</th>
|
||||||
|
<th>On</th>
|
||||||
|
<th>Off</th>
|
||||||
|
<th>On</th>
|
||||||
|
<th>Off</th>
|
||||||
|
<th></th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-info" data-target="#exampleModal2-1"
|
||||||
|
data-toggle="modal">
|
||||||
|
<i class="fal fa-pen"> Edit</i>
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-Modal-ElevatorManagement -->
|
||||||
|
<!-- Modal-ElevatorManagement -->
|
||||||
|
<div class="modal fade" id="exampleModal1-1" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||||
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th scope="col">號機</th>
|
||||||
|
<th scope="col">狀態</th>
|
||||||
|
<th scope="col">所在樓層</th>
|
||||||
|
<th scope="col">防疫對策</th>
|
||||||
|
<th scope="col">遠隔休止</th>
|
||||||
|
<th scope="col">獨立運轉</th>
|
||||||
|
<th scope="col">VIP</th>
|
||||||
|
<th scope="col">回歸運轉</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>1</th>
|
||||||
|
<th>運作中</th>
|
||||||
|
<th>3F</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID1-1"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID1-1">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID1-2"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID1-2">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID1-3"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID1-3">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID1-4"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID1-4">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID1-5"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID1-5">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-Modal-ElevatorManagement -->
|
||||||
|
<!-- Modal-ElevatorManagement -->
|
||||||
|
<div class="modal fade" id="exampleModal1-2" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||||
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th scope="col">號機</th>
|
||||||
|
<th scope="col">狀態</th>
|
||||||
|
<th scope="col">所在樓層</th>
|
||||||
|
<th scope="col">防疫對策</th>
|
||||||
|
<th scope="col">遠隔休止</th>
|
||||||
|
<th scope="col">獨立運轉</th>
|
||||||
|
<th scope="col">VIP</th>
|
||||||
|
<th scope="col">回歸運轉</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>2</th>
|
||||||
|
<th>保養</th>
|
||||||
|
<th>2F</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID2-1"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID2-1">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID2-2"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID2-2">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID2-3"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID2-3">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID2-4"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID2-4">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID2-5"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID2-5">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-Modal-ElevatorManagement -->
|
||||||
|
<!-- Modal-ElevatorManagement -->
|
||||||
|
<div class="modal fade" id="exampleModal2-1" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||||
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th scope="col">號機</th>
|
||||||
|
<th scope="col">狀態</th>
|
||||||
|
<th scope="col">所在樓層</th>
|
||||||
|
<th scope="col">防疫對策</th>
|
||||||
|
<th scope="col">遠隔休止</th>
|
||||||
|
<th scope="col">獨立運轉</th>
|
||||||
|
<th scope="col">VIP</th>
|
||||||
|
<th scope="col">回歸運轉</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="text-center">
|
||||||
|
<th>2</th>
|
||||||
|
<th>運作中</th>
|
||||||
|
<th>B1F</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID3-1"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID3-1">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID3-2"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID3-2">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID3-3"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID3-3">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID3-4"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID3-4">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="switch mr-2">
|
||||||
|
<input class="switch-checkbox" id="switchID3-5"
|
||||||
|
type="checkbox" name="switch-checkbox">
|
||||||
|
<label class="switch-label" for="switchID3-5">
|
||||||
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
||||||
|
<div class="switch-Round-btn"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<img type="button" src="img\u1673.svg">
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End-Modal-ElevatorManagement -->
|
||||||
|
|
||||||
|
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
setBuildFloor();
|
||||||
|
})
|
||||||
|
|
||||||
|
function setBuildFloor(floorCnt = 10,eleCnt = 3) {
|
||||||
|
let tbody = creEle("tbody");
|
||||||
|
for (let f = 1; f <= floorCnt; f++) {
|
||||||
|
let tr = creEle("tr");
|
||||||
|
for (let e = 1; e <= eleCnt; e++) {
|
||||||
|
let td = creEle("td");
|
||||||
|
tr.append(td);
|
||||||
|
}
|
||||||
|
tbody.append(tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#floorTable").html(tbody);
|
||||||
|
|
||||||
|
$("#floorTable tbody tr td").each((index, td) => {
|
||||||
|
if (index == 0) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function initYTTable(element) {
|
||||||
|
let obj = { init: null, SetContainer: null, Ele: element || $(".yt-table") };
|
||||||
|
|
||||||
|
obj.init = function () {
|
||||||
|
this.SetContainer();
|
||||||
|
this.SetBorder();
|
||||||
|
this.SetEndCellRightBorderRemove();
|
||||||
|
this.SetEndCellBottomBorderRemove();
|
||||||
|
}
|
||||||
|
|
||||||
|
obj.SetContainer = function () {
|
||||||
|
$(this.Ele).each(function (index, value) {
|
||||||
|
if ($(value).parent(".yt-table-container").length != 0) {
|
||||||
|
$(value).unwrap(".yt-table-container");
|
||||||
|
}
|
||||||
|
let strHtml = $(`<div class="yt-table-container"></div>`);
|
||||||
|
$(value).wrap(strHtml);
|
||||||
|
$(value).parent(".yt-table-container").parent().addClass("table-div");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
obj.SetBorder = function () {
|
||||||
|
console.log("123123", $(this.Ele))
|
||||||
|
$(`${$(this.Ele).selector}.th-td-br th,${$(this.Ele).selector}.th-td-br td`).css("border-right", "1px solid #adadad");
|
||||||
|
$(`${$(this.Ele).selector}.th-bd thead th`).css("border-bottom", "1px solid #adadad");
|
||||||
|
$(`${$(this.Ele).selector}.td-bd tbody td`).css("border-bottom", "1px solid #adadad");
|
||||||
|
}
|
||||||
|
|
||||||
|
obj.SetEndCellRightBorderRemove = function () {
|
||||||
|
let notBorder = 0;
|
||||||
|
$(`${$(this.Ele).selector} thead th:last-child,.yt-table tbody td:last-child`).each(function (index, value) {
|
||||||
|
if (index >= notBorder) {
|
||||||
|
$(value).css("border-right", "0px");
|
||||||
|
}
|
||||||
|
if ($(value).attr("rowspan")) {
|
||||||
|
let rowspan = parseInt($(value).attr("rowspan"));
|
||||||
|
notBorder = index + rowspan;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
obj.SetEndCellBottomBorderRemove = function () {
|
||||||
|
$(`${$(this.Ele).selector} tr:last-child td`).each(function (index, value) {
|
||||||
|
$(value).css("border-bottom", "0px");
|
||||||
|
})
|
||||||
|
|
||||||
|
$(`${$(this.Ele).selector} tr td[rowspan]`).each(function (index, value) {
|
||||||
|
let tr = $(value).closest("tr");
|
||||||
|
let oriTrInd = $(tr).index();
|
||||||
|
let lastTrInd = $(tr).parent("tbody").find("tr:last-child").index();
|
||||||
|
if (lastTrInd - oriTrInd == $(value).prop("rowspan") - 1) {
|
||||||
|
$(value).css("border-bottom", "0px");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
obj.init();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -2487,6 +2487,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
require(
|
require(
|
||||||
[
|
[
|
||||||
"lib/app.bundle",
|
"lib/app.bundle",
|
||||||
|
"lib/app.menu",
|
||||||
"datatables.net.b4",
|
"datatables.net.b4",
|
||||||
"n4js/alarmbaja",
|
"n4js/alarmbaja",
|
||||||
"lib/statistics/flot/flot.bundle",
|
"lib/statistics/flot/flot.bundle",
|
||||||
@ -2537,7 +2538,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
$("#sysMonBtnList").html()
|
$("#sysMonBtnList").html()
|
||||||
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
|
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
|
||||||
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
|
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
|
||||||
let btn = creBtn(subSysObj.full_name, `subSysBtn${subSysObj.sub_system_tag}`, "topFunBtn", ["dropdown-item"], { page: "systemMonitor" });
|
let page = "systemMonitor";
|
||||||
|
if (subSysObj.sub_system_tag == "EL") {
|
||||||
|
page = "sysElevator";
|
||||||
|
}
|
||||||
|
let btn = creBtn(subSysObj.full_name, `subSysBtn${subSysObj.sub_system_tag}`, "topFunBtn", ["dropdown-item"], { page: page });
|
||||||
subSysObj.main_system_tag = mainSysObj.main_system_tag;
|
subSysObj.main_system_tag = mainSysObj.main_system_tag;
|
||||||
btn.data("subSysObj", subSysObj);
|
btn.data("subSysObj", subSysObj);
|
||||||
$("#sysMonBtnList").append(btn);
|
$("#sysMonBtnList").append(btn);
|
||||||
|
|||||||
@ -124,202 +124,202 @@ var myapp_config = {
|
|||||||
* Publish Date: 2018-01-01T17:42Z
|
* Publish Date: 2018-01-01T17:42Z
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function($) {
|
//(function($) {
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* Menu Plugin
|
// * Menu Plugin
|
||||||
**/
|
// **/
|
||||||
$.fn.extend({
|
// $.fn.extend({
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* pass the options variable to the function
|
// * pass the options variable to the function
|
||||||
*
|
// *
|
||||||
* $(id).navigation({
|
// * $(id).navigation({
|
||||||
* accordion: true,
|
// * accordion: true,
|
||||||
* animate: 'easeOutExpo',
|
// * animate: 'easeOutExpo',
|
||||||
* speed: 200,
|
// * speed: 200,
|
||||||
* closedSign: '[+]',
|
// * closedSign: '[+]',
|
||||||
* openedSign: '[-]',
|
// * openedSign: '[-]',
|
||||||
* initClass: 'js-nav-built'
|
// * initClass: 'js-nav-built'
|
||||||
* });
|
// * });
|
||||||
*
|
// *
|
||||||
**/
|
// **/
|
||||||
|
|
||||||
navigation: function(options) {
|
// navigation: function(options) {
|
||||||
|
|
||||||
var defaults = {
|
// var defaults = {
|
||||||
accordion: true,
|
// accordion: true,
|
||||||
animate: 'easeOutExpo',
|
// animate: 'easeOutExpo',
|
||||||
speed: 200,
|
// speed: 200,
|
||||||
closedSign: '[+]',
|
// closedSign: '[+]',
|
||||||
openedSign: '[-]',
|
// openedSign: '[-]',
|
||||||
initClass: 'js-nav-built'
|
// initClass: 'js-nav-built'
|
||||||
},
|
// },
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* extend our default options with those provided.
|
// * extend our default options with those provided.
|
||||||
**/
|
// **/
|
||||||
opts = $.extend(defaults, options),
|
// opts = $.extend(defaults, options),
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* assign current element to variable, in this case is UL element
|
// * assign current element to variable, in this case is UL element
|
||||||
**/
|
// **/
|
||||||
self = $(this);
|
// self = $(this);
|
||||||
|
|
||||||
if (!self.hasClass(opts.initClass)) {
|
// if (!self.hasClass(opts.initClass)) {
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* confirm build to prevent rebuild error
|
// * confirm build to prevent rebuild error
|
||||||
**/
|
// **/
|
||||||
self.addClass(opts.initClass);
|
// self.addClass(opts.initClass);
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* add a mark [+] to a multilevel menu
|
// * add a mark [+] to a multilevel menu
|
||||||
**/
|
// **/
|
||||||
self.find("li").each(function() {
|
// self.find("li").each(function() {
|
||||||
if ($(this).find("ul").length !== 0) {
|
// if ($(this).find("ul").length !== 0) {
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* add the multilevel sign next to the link
|
// * add the multilevel sign next to the link
|
||||||
**/
|
// **/
|
||||||
$(this).find("a:first").append("<b class='collapse-sign'>" + opts.closedSign + "</b>");
|
// $(this).find("a:first").append("<b class='collapse-sign'>" + opts.closedSign + "</b>");
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* avoid jumping to the top of the page when the href is an #
|
// * avoid jumping to the top of the page when the href is an #
|
||||||
**/
|
// **/
|
||||||
if ($(this).find("a:first").attr('href') == "#") {
|
// if ($(this).find("a:first").attr('href') == "#") {
|
||||||
$(this).find("a:first").click(function() {
|
// $(this).find("a:first").click(function() {
|
||||||
return false;
|
// return false;
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* add open sign to all active lists
|
// * add open sign to all active lists
|
||||||
**/
|
// **/
|
||||||
self.find("li.active").each(function() {
|
// self.find("li.active").each(function() {
|
||||||
$(this).parents("ul")
|
// $(this).parents("ul")
|
||||||
.parent("li")
|
// .parent("li")
|
||||||
.find("a:first")
|
// .find("a:first")
|
||||||
.attr('aria-expanded', true)
|
// .attr('aria-expanded', true)
|
||||||
.find("b:first")
|
// .find("b:first")
|
||||||
.html(opts.openedSign);
|
// .html(opts.openedSign);
|
||||||
});
|
// });
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* click events
|
// * click events
|
||||||
**/
|
// **/
|
||||||
self.find("li a").on('mousedown', function(e) {
|
// self.find("li a").on('mousedown', function(e) {
|
||||||
|
|
||||||
if ($(this).parent().find("ul").length !== 0) {
|
// if ($(this).parent().find("ul").length !== 0) {
|
||||||
|
|
||||||
if (opts.accordion) {
|
// if (opts.accordion) {
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* do nothing when the list is open
|
// * do nothing when the list is open
|
||||||
**/
|
// **/
|
||||||
if (!$(this).parent().find("ul").is(':visible')) {
|
// if (!$(this).parent().find("ul").is(':visible')) {
|
||||||
|
|
||||||
parents = $(this).parent().parents("ul");
|
// parents = $(this).parent().parents("ul");
|
||||||
visible = self.find("ul:visible");
|
// visible = self.find("ul:visible");
|
||||||
visible.each(function(visibleIndex) {
|
// visible.each(function(visibleIndex) {
|
||||||
var close = true;
|
// var close = true;
|
||||||
parents.each(function(parentIndex) {
|
// parents.each(function(parentIndex) {
|
||||||
|
|
||||||
if (parents[parentIndex] == visible[visibleIndex]) {
|
// if (parents[parentIndex] == visible[visibleIndex]) {
|
||||||
|
|
||||||
close = false;
|
// close = false;
|
||||||
return false;
|
// return false;
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
if (close) {
|
// if (close) {
|
||||||
|
|
||||||
if ($(this).parent().find("ul") != visible[visibleIndex]) {
|
// if ($(this).parent().find("ul") != visible[visibleIndex]) {
|
||||||
|
|
||||||
$(visible[visibleIndex]).slideUp(opts.speed + 300, opts.animate, function() {
|
// $(visible[visibleIndex]).slideUp(opts.speed + 300, opts.animate, function() {
|
||||||
$(this).parent("li")
|
// $(this).parent("li")
|
||||||
.removeClass("open")
|
// .removeClass("open")
|
||||||
.find("a:first")
|
// .find("a:first")
|
||||||
.attr('aria-expanded', false)
|
// .attr('aria-expanded', false)
|
||||||
.find("b:first")
|
// .find("b:first")
|
||||||
.html(opts.closedSign);
|
// .html(opts.closedSign);
|
||||||
|
|
||||||
if (myapp_config.debugState)
|
// if (myapp_config.debugState)
|
||||||
console.log("nav item closed")
|
// console.log("nav item closed")
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* Add active class to open element
|
// * Add active class to open element
|
||||||
**/
|
// **/
|
||||||
if ($(this).parent().find("ul:first").is(":visible") && !$(this).parent().find("ul:first").hasClass("active")) {
|
// if ($(this).parent().find("ul:first").is(":visible") && !$(this).parent().find("ul:first").hasClass("active")) {
|
||||||
|
|
||||||
$(this).parent().find("ul:first").slideUp(opts.speed + 100, opts.animate, function() {
|
// $(this).parent().find("ul:first").slideUp(opts.speed + 100, opts.animate, function() {
|
||||||
$(this).parent("li")
|
// $(this).parent("li")
|
||||||
.removeClass("open")
|
// .removeClass("open")
|
||||||
.find("a:first")
|
// .find("a:first")
|
||||||
.attr('aria-expanded', false)
|
// .attr('aria-expanded', false)
|
||||||
.find("b:first").delay(opts.speed)
|
// .find("b:first").delay(opts.speed)
|
||||||
.html(opts.closedSign);
|
// .html(opts.closedSign);
|
||||||
|
|
||||||
if (myapp_config.debugState)
|
// if (myapp_config.debugState)
|
||||||
console.log("nav item closed")
|
// console.log("nav item closed")
|
||||||
});
|
// });
|
||||||
} else {
|
// } else {
|
||||||
$(this).parent().find("ul:first").slideDown(opts.speed, opts.animate, function() {
|
// $(this).parent().find("ul:first").slideDown(opts.speed, opts.animate, function() {
|
||||||
|
|
||||||
$(this).parent("li")
|
// $(this).parent("li")
|
||||||
.addClass("open")
|
// .addClass("open")
|
||||||
.find("a:first")
|
// .find("a:first")
|
||||||
.attr('aria-expanded', true)
|
// .attr('aria-expanded', true)
|
||||||
.find("b:first").delay(opts.speed)
|
// .find("b:first").delay(opts.speed)
|
||||||
.html(opts.openedSign);
|
// .html(opts.openedSign);
|
||||||
|
|
||||||
if (myapp_config.debugState)
|
// if (myapp_config.debugState)
|
||||||
console.log("nav item opened");
|
// console.log("nav item opened");
|
||||||
|
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
} else {
|
// } else {
|
||||||
|
|
||||||
if (myapp_config.debugState)
|
// if (myapp_config.debugState)
|
||||||
console.log(self.get(0) + " this menu already exists");
|
// console.log(self.get(0) + " this menu already exists");
|
||||||
}
|
// }
|
||||||
|
|
||||||
},
|
// },
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* DOC: $(id).destroy();
|
// * DOC: $(id).destroy();
|
||||||
**/
|
// **/
|
||||||
navigationDestroy: function() {
|
// navigationDestroy: function() {
|
||||||
|
|
||||||
self = $(this);
|
// self = $(this);
|
||||||
|
|
||||||
if (self.hasClass(myapp_config.navInitalized)) {
|
// if (self.hasClass(myapp_config.navInitalized)) {
|
||||||
self.find("li").removeClass("active open");
|
// self.find("li").removeClass("active open");
|
||||||
self.find("li a").off('mousedown').removeClass("active").removeAttr("aria-expanded").find(".collapse-sign").remove();
|
// self.find("li a").off('mousedown').removeClass("active").removeAttr("aria-expanded").find(".collapse-sign").remove();
|
||||||
self.removeClass(myapp_config.navInitalized).find("ul").removeAttr("style");
|
// self.removeClass(myapp_config.navInitalized).find("ul").removeAttr("style");
|
||||||
|
|
||||||
if (myapp_config.debugState)
|
// if (myapp_config.debugState)
|
||||||
console.log( self.get(0) + " destroyed");
|
// console.log( self.get(0) + " destroyed");
|
||||||
|
|
||||||
} else {
|
// } else {
|
||||||
console.log("menu does not exist")
|
// console.log("menu does not exist")
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
})(jQuery, window, document);
|
//})(jQuery, window, document);
|
||||||
/*!
|
/*!
|
||||||
* jQuery menuSlider v1.0.0
|
* jQuery menuSlider v1.0.0
|
||||||
*
|
*
|
||||||
|
|||||||
205
Frontend/lib/app.menu.js
Normal file
205
Frontend/lib/app.menu.js
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
/*!
|
||||||
|
* jQuery app.navigation v1.0.0
|
||||||
|
*
|
||||||
|
* Copyright 2019, 2020 SmartAdmin WebApp
|
||||||
|
* Released under Marketplace License (see your license details for usage)
|
||||||
|
*
|
||||||
|
* Publish Date: 2018-01-01T17:42Z
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Menu Plugin
|
||||||
|
**/
|
||||||
|
$.fn.extend({
|
||||||
|
|
||||||
|
/**
|
||||||
|
* pass the options variable to the function
|
||||||
|
*
|
||||||
|
* $(id).navigation({
|
||||||
|
* accordion: true,
|
||||||
|
* animate: 'easeOutExpo',
|
||||||
|
* speed: 200,
|
||||||
|
* closedSign: '[+]',
|
||||||
|
* openedSign: '[-]',
|
||||||
|
* initClass: 'js-nav-built'
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
navigation: function(options) {
|
||||||
|
|
||||||
|
var defaults = {
|
||||||
|
accordion: true,
|
||||||
|
animate: 'swing',
|
||||||
|
speed: 100,
|
||||||
|
closedSign: '[+]',
|
||||||
|
openedSign: '[-]',
|
||||||
|
initClass: 'js-nav-built'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* extend our default options with those provided.
|
||||||
|
**/
|
||||||
|
opts = $.extend(defaults, options),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* assign current element to variable, in this case is UL element
|
||||||
|
**/
|
||||||
|
self = $(this);
|
||||||
|
|
||||||
|
if (!self.hasClass(opts.initClass)) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* confirm build to prevent rebuild error
|
||||||
|
**/
|
||||||
|
self.addClass(opts.initClass);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* add a mark [+] to a multilevel menu
|
||||||
|
**/
|
||||||
|
self.find("li").each(function() {
|
||||||
|
if ($(this).find("ul").length !== 0) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* add the multilevel sign next to the link
|
||||||
|
**/
|
||||||
|
$(this).find("a:first").append("<b class='collapse-sign'>" + opts.closedSign + "</b>");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* avoid jumping to the top of the page when the href is an #
|
||||||
|
**/
|
||||||
|
if ($(this).find("a:first").attr('href') == "#") {
|
||||||
|
$(this).find("a:first").click(function() {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* add open sign to all active lists
|
||||||
|
**/
|
||||||
|
self.find("li.active").each(function() {
|
||||||
|
$(this).parents("ul")
|
||||||
|
.parent("li")
|
||||||
|
.find("a:first")
|
||||||
|
.attr('aria-expanded', true)
|
||||||
|
.find("b:first")
|
||||||
|
.html(opts.openedSign);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* click events
|
||||||
|
**/
|
||||||
|
self.find("li a").on('mousedown', function(e) {
|
||||||
|
|
||||||
|
if ($(this).parent().find("ul").length !== 0) {
|
||||||
|
|
||||||
|
if (opts.accordion) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* do nothing when the list is open
|
||||||
|
**/
|
||||||
|
if (!$(this).parent().find("ul").is(':visible')) {
|
||||||
|
|
||||||
|
parents = $(this).parent().parents("ul");
|
||||||
|
visible = self.find("ul:visible");
|
||||||
|
visible.each(function(visibleIndex) {
|
||||||
|
var close = true;
|
||||||
|
parents.each(function(parentIndex) {
|
||||||
|
|
||||||
|
if (parents[parentIndex] == visible[visibleIndex]) {
|
||||||
|
|
||||||
|
close = false;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (close) {
|
||||||
|
|
||||||
|
if ($(this).parent().find("ul") != visible[visibleIndex]) {
|
||||||
|
|
||||||
|
$(visible[visibleIndex]).slideUp(opts.speed + 300, opts.animate, function() {
|
||||||
|
$(this).parent("li")
|
||||||
|
.removeClass("open")
|
||||||
|
.find("a:first")
|
||||||
|
.attr('aria-expanded', false)
|
||||||
|
.find("b:first")
|
||||||
|
.html(opts.closedSign);
|
||||||
|
|
||||||
|
if (myapp_config.debugState)
|
||||||
|
console.log("nav item closed")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add active class to open element
|
||||||
|
**/
|
||||||
|
if ($(this).parent().find("ul:first").is(":visible") && !$(this).parent().find("ul:first").hasClass("active")) {
|
||||||
|
|
||||||
|
$(this).parent().find("ul:first").slideUp(opts.speed + 100, opts.animate, function() {
|
||||||
|
$(this).parent("li")
|
||||||
|
.removeClass("open")
|
||||||
|
.find("a:first")
|
||||||
|
.attr('aria-expanded', false)
|
||||||
|
.find("b:first").delay(opts.speed)
|
||||||
|
.html(opts.closedSign);
|
||||||
|
|
||||||
|
if (myapp_config.debugState)
|
||||||
|
console.log("nav item closed")
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$(this).parent().find("ul:first").slideDown(opts.speed, opts.animate, function() {
|
||||||
|
|
||||||
|
$(this).parent("li")
|
||||||
|
.addClass("open")
|
||||||
|
.find("a:first")
|
||||||
|
.attr('aria-expanded', true)
|
||||||
|
.find("b:first").delay(opts.speed)
|
||||||
|
.html(opts.openedSign);
|
||||||
|
|
||||||
|
if (myapp_config.debugState)
|
||||||
|
console.log("nav item opened");
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if (myapp_config.debugState)
|
||||||
|
console.log(self.get(0) + " this menu already exists");
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DOC: $(id).destroy();
|
||||||
|
**/
|
||||||
|
navigationDestroy: function() {
|
||||||
|
|
||||||
|
self = $(this);
|
||||||
|
|
||||||
|
if (self.hasClass(myapp_config.navInitalized)) {
|
||||||
|
self.find("li").removeClass("active open");
|
||||||
|
self.find("li a").off('mousedown').removeClass("active").removeAttr("aria-expanded").find(".collapse-sign").remove();
|
||||||
|
self.removeClass(myapp_config.navInitalized).find("ul").removeAttr("style");
|
||||||
|
|
||||||
|
if (myapp_config.debugState)
|
||||||
|
console.log( self.get(0) + " destroyed");
|
||||||
|
|
||||||
|
} else {
|
||||||
|
console.log("menu does not exist")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, window, document);
|
||||||
Loading…
Reference in New Issue
Block a user