Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS
This commit is contained in:
SinoroWu
commit
9f0c8db45d
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(
|
||||
[
|
||||
"lib/app.bundle",
|
||||
"lib/app.menu",
|
||||
"datatables.net.b4",
|
||||
"n4js/alarmbaja",
|
||||
"lib/statistics/flot/flot.bundle",
|
||||
@ -2537,7 +2538,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
$("#sysMonBtnList").html()
|
||||
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
|
||||
$.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;
|
||||
btn.data("subSysObj", subSysObj);
|
||||
$("#sysMonBtnList").append(btn);
|
||||
|
||||
@ -124,202 +124,202 @@ var myapp_config = {
|
||||
* Publish Date: 2018-01-01T17:42Z
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
//(function($) {
|
||||
|
||||
/**
|
||||
* Menu Plugin
|
||||
**/
|
||||
$.fn.extend({
|
||||
// /**
|
||||
// * 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'
|
||||
* });
|
||||
*
|
||||
**/
|
||||
// /**
|
||||
// * pass the options variable to the function
|
||||
// *
|
||||
// * $(id).navigation({
|
||||
// * accordion: true,
|
||||
// * animate: 'easeOutExpo',
|
||||
// * speed: 200,
|
||||
// * closedSign: '[+]',
|
||||
// * openedSign: '[-]',
|
||||
// * initClass: 'js-nav-built'
|
||||
// * });
|
||||
// *
|
||||
// **/
|
||||
|
||||
navigation: function(options) {
|
||||
// navigation: function(options) {
|
||||
|
||||
var defaults = {
|
||||
accordion: true,
|
||||
animate: 'easeOutExpo',
|
||||
speed: 200,
|
||||
closedSign: '[+]',
|
||||
openedSign: '[-]',
|
||||
initClass: 'js-nav-built'
|
||||
},
|
||||
// var defaults = {
|
||||
// accordion: true,
|
||||
// animate: 'easeOutExpo',
|
||||
// speed: 200,
|
||||
// closedSign: '[+]',
|
||||
// openedSign: '[-]',
|
||||
// initClass: 'js-nav-built'
|
||||
// },
|
||||
|
||||
/**
|
||||
* extend our default options with those provided.
|
||||
**/
|
||||
opts = $.extend(defaults, options),
|
||||
// /**
|
||||
// * extend our default options with those provided.
|
||||
// **/
|
||||
// opts = $.extend(defaults, options),
|
||||
|
||||
/**
|
||||
* assign current element to variable, in this case is UL element
|
||||
**/
|
||||
self = $(this);
|
||||
// /**
|
||||
// * assign current element to variable, in this case is UL element
|
||||
// **/
|
||||
// self = $(this);
|
||||
|
||||
if (!self.hasClass(opts.initClass)) {
|
||||
// if (!self.hasClass(opts.initClass)) {
|
||||
|
||||
/**
|
||||
* confirm build to prevent rebuild error
|
||||
**/
|
||||
self.addClass(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 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>");
|
||||
// /**
|
||||
// * 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;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// /**
|
||||
// * 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);
|
||||
});
|
||||
// /**
|
||||
// * 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) {
|
||||
// /**
|
||||
// * click events
|
||||
// **/
|
||||
// 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
|
||||
**/
|
||||
if (!$(this).parent().find("ul").is(':visible')) {
|
||||
// /**
|
||||
// * 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) {
|
||||
// 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]) {
|
||||
// if (parents[parentIndex] == visible[visibleIndex]) {
|
||||
|
||||
close = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (close) {
|
||||
// close = false;
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// 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() {
|
||||
$(this).parent("li")
|
||||
.removeClass("open")
|
||||
.find("a:first")
|
||||
.attr('aria-expanded', false)
|
||||
.find("b:first")
|
||||
.html(opts.closedSign);
|
||||
// $(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")
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 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")) {
|
||||
// /**
|
||||
// * 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);
|
||||
// $(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() {
|
||||
// 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);
|
||||
// $(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");
|
||||
// if (myapp_config.debugState)
|
||||
// console.log("nav item opened");
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
} else {
|
||||
// } else {
|
||||
|
||||
if (myapp_config.debugState)
|
||||
console.log(self.get(0) + " this menu already exists");
|
||||
}
|
||||
// if (myapp_config.debugState)
|
||||
// console.log(self.get(0) + " this menu already exists");
|
||||
// }
|
||||
|
||||
},
|
||||
// },
|
||||
|
||||
/**
|
||||
* DOC: $(id).destroy();
|
||||
**/
|
||||
navigationDestroy: function() {
|
||||
// /**
|
||||
// * DOC: $(id).destroy();
|
||||
// **/
|
||||
// navigationDestroy: function() {
|
||||
|
||||
self = $(this);
|
||||
// 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 (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");
|
||||
// if (myapp_config.debugState)
|
||||
// console.log( self.get(0) + " destroyed");
|
||||
|
||||
} else {
|
||||
console.log("menu does not exist")
|
||||
}
|
||||
// } else {
|
||||
// console.log("menu does not exist")
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
// }
|
||||
// });
|
||||
|
||||
})(jQuery, window, document);
|
||||
//})(jQuery, window, document);
|
||||
/*!
|
||||
* 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