<style>
body {
/*font-family: "맑은고딕", "MalgunGothic", nbgr, '나눔바른고딕', '맑은고딕', '맑은 고딕', Arial, sans-serif;*/
font-family: 'NanumSquare','맑은고딕', '맑은 고딕', Arial, sans-serif;
/* font-size: 14px; */
line-height:1.2;
color: #000;
}
table {
border-collapse: collapse;
border: 1px solid #69899F;
width:500px;
margin-top:60px;
text-align: center;
}
table td {
border: 1px dotted #000000;
padding: 5px;
text-align: CENTER;
}
table td:first-child {
border-left: 0px solid #000000;
}
table th {
border: 1px solid #69899F;
padding: 5px;
}
.dLine {
overflow: hidden;
margin: 2px;
}
.dLine LABEL {
margin-right: 5px;
width: 70px;
text-align: right;
display: inline-block;
}
input {
border:1px solid #cccccc;
width: 10%;
}
.dLine INPUT[type="checkbox"] {
width: auto;
margin: 0;
margin-top: 3px;
vertical-align: middle;
}
.dLine SELECT {
width: 100px;
}
SELECT {
width: 50px;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none; /* */
color:inherit; /* */
}
/* 페이징css */
.pagination a {
display: inline-block;
padding: 3px 5px;
margin-right: 10px;
font-family:Tahoma;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
text-decoration: none;
}
.pagination a.active {
background: #333;
color: #fff;
}
/* 버튼 CSS */
.myButton{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}
.myButton:active {
position:relative;
top:1px;
}
/* 페이징 번호 */
ul {
text-align:center;
}
ul li {
display:inline;
vertical-align:middle;
}
ul li a {
display:-moz-inline-stack; /*FF2*/
display:inline-block;
vertical-align:top;
padding:4px;
margin-right:3px;
width:15px !important;
color:#000;
font:bold 12px tahoma;
border:1px solid #eee;
text-align:center;
text-decoration:none;
width /**/:26px; /*IE 5.5*/
}
ul li a.now {
background-color:#f40;
border:1px solid #f40;
}
ul li a:hover, ul li a:focus {
border:1px solid #f40;
background-color:#f40;
}
/* PoPUP */
.myModal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.myModal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.myModalInput{
text-align: center;
border: 1px;
font-size: 30px;
background-color: white;
}
.myModalInputBUILDING{
border: 1px;
font-size: 30px;
background-color: white;
}
.POPUPbilding {
color: blue;
cursor:pointer;
}
.pagination {
display: inline-flex;
cursor:pointer;"
}
</style>
<!-- bootstrapk table 링크
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/lms/bim/main.css">
<script src="${pageContext.request.contextPath}/js/lms/bim/html5/jquery.min.js"></script>
</head>
<body>
<div id="mainWrap">
<div id="header" style="position:absolute;">
<img src="${pageContext.request.contextPath}/images/lms/bim/common/logo.png" alt="ArchiBIM" /><span class="step"></span>
</div>
</div>
<!-- POPUP(모달) -->
<div id="myModal" class="myModal">
<!-- Modal content -->
<div class="myModal-content">
<span class="close">×</span>
<table style="width: 900px;" class="table table-hover">
<col width="200">
<col width="200">
<thead>
<tr>
<th>BUILDING</th>
<th>FLOOR</th>
</tr>
</thead>
<tbody id="POPUPtable_tr" class="allign-center"></tbody>
</table>
</div>
</div>
<!-- 게시판 table -->
<div style="min-height: 220px" align="center">
<table style="width: 1820px;" class="table table-hover">
<col width="200">
<col width="200">
<col width="200">
<col width="200">
<thead>
<tr>
<th>BUILDING</th>
<th>FLOOR</th>
<th>VIEW MODE</th>
<th>VIEWER</th>
</tr>
</thead>
<tbody id="table_tr" class="allign-center"></tbody>
</table>
<!-- 검색 -->
<div style="margin: 20px;">
<select class="search_Group" id="searchbox" name="searchbox">
<option value="99">전체검색</option>
<option value="0">BUILDING</option>
<option value="1">FLOOR</option>
</select>
<input type="text" class="search" id="search" name="search" placeholder="search" ></input>
<button class="searchbt" id="searchbt" name="searchbt" onclick="searchbutton()">검색</button></div>
<!-- 페이징 숫자 -->
<ul class="pagination"></ul>
</div>
<script type="text/javascript">
var _buildingCode,_floorCode,_viewMode,_simulMgmPk; //변수 선언
$(document).ready(function() {
var resultData = getJsonData( //건물 층수 종합 데이터
'/lms/bim/floors/test' //DB
);
if(!resultData) {
return;
}
var count = 0; // id값을 다르게 하기위해서 count 적용
for (var i in resultData) {
var item = resultData[i];
//table생성
var option = $("<tr><td><a onclick='onBtnClick(this)' class='POPUPbilding'>"+item.buildingCode+"</a></td>"+
"<td>"+item.floorCode+"</td>"+
"<td><select onchange='selectOnChange(this)'><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select>"+
"<select style='display: none'></select></td>"+
"<td><button class='myButton' onclick='viewBtnClick(this)'>VIEW</button></td></tr>");
$('#table_tr').append(option);
count++;
}
$('#building').on('change', function (e) {
var optionSelected = $("option:selected", this);
_buildingCode = this.value;
var resultData = getJsonData(
'/lms/bim/building/floors?buildingCode='+_buildingCode
);
if(!resultData) {
return;
}
$('#floor').empty();
for (var i in resultData) {
var item = resultData[i];
if(i == 0){
_floorCode = item.floorCode;
}
var option = $("<option>"+item.floorCode+"</option>");
$('#floor').append(option);
}
});
$('#floor').on('change', function (e) {
var optionSelected = $("option:selected", this);
_floorCode = this.value;
});
_viewMode = 3;
$('#viewMode').on('change', function (e) {
var optionSelected = $("option:selected", this);
_viewMode = this.value;
if(_viewMode == 7){
var resultData = getJsonData(
'/lms/bim/simul',
{'buildingCode': _buildingCode,'floorCode': _floorCode}
);
if(!resultData) {
return;
}
$('#simulation').show();
$('#simulation').empty();
$('#simulation').append("<option>"+'선택'+"</option>");
for (var i in resultData) {
var item = resultData[i];
var option = $("<option>"+item.simulMgmPk+"</option>");
$('#simulation').append(option);
}
}else{
$('#simulation').hide();
}
});
$('#simulation').on('change', function (e) {
var optionSelected = $("option:selected", this);
if(this.value == '선택'){
_simulMgmPk = null;
}else{
_simulMgmPk = this.value;
}
});
});
/* POPUP */
function onBtnClick(value) {
/* var resultData = getJsonData( //건물 층수 종합 데이터
'/lms/bim/floors/test'
);
*/
var td = $(value).parent()
var tr = $(td).parent();
var root = $(tr).parent();
var BUILDINGvalue = tr[0].children[0].innerText; //빌딩선택
//FOOL층수
$('#POPUPtable_tr').empty();
for (var i = 0; i < root[0].children.length; i++) {
var item = root[0].children[i];
if(BUILDINGvalue == item.children[0].innerText){
var option = $("<tr><td>"+BUILDINGvalue+"</td><td>"+item.children[1].innerText+"</td></tr>");
$('#POPUPtable_tr').append(option);
}
}
/* for (var i in resultData) {
var item = resultData[i];
if(BUILDINGvalue == item.buildingCode){
var option = $("<tr><td>"+BUILDINGvalue+"</td><td>"+item.floorCode+"</td></tr>");
$('#POPUPtable_tr').append(option);
}
} */
/* $('.myModalInputBUILDING').val(BUILDINGvalue);
$('.myModalInput').val(option); */
var modal = document.getElementById('myModal');
modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
}
function selectOnChange(value) {
var selectValue = value.selectedOptions[0].innerText;
var td = $(value).parent();
var tr = $(td).parent();
var buildingCode = tr[0].children[0].innerText;
var floorCode = tr[0].children[1].innerText;
var simulSelect = td[0].children[1];
if(selectValue == 7){
var resultData = getJsonData(
'/lms/bim/simul',
{'buildingCode': buildingCode,'floorCode': floorCode}
);
if(!resultData) {
return;
}
$(simulSelect).show();
$(simulSelect).empty();
$(simulSelect).append("<option>"+'선택'+"</option>");
for (var i in resultData) {
var item = resultData[i];
var option = $("<option>"+item.simulMgmPk+"</option>");
$(simulSelect).append(option);
}
}else{
$(simulSelect).empty();
$(simulSelect).hide();
}
}
function viewBtnClick(value) { //view button
/* if(!_buildingCode || !_floorCode || _buildingCode == '선택'){
return;
} */
var td = $(value).parent();
var tr = $(td).parent();
var buildingCode = tr[0].children[0].innerText;
var floorCode = tr[0].children[1].innerText;
var select1 = tr[0].children[2].children[0];
var select1Value = select1.selectedOptions[0].innerText;
var select2 = tr[0].children[2].children[1];
var simul2Value = null;
if(select2.selectedOptions.length > 0){
simul2Value = select2.selectedOptions[0].innerText;
}
var url = window.location.origin;
url += '${pageContext.request.contextPath}';
/* var viewMode = document.getElementById("viewMode");
var viewModeValue = viewMode.options[viewMode.selectedIndex].value; */
var param = '?buildingCode=';
param += buildingCode;
param += '&floorCode=';
param += floorCode;
param += '&viewMode=';
param += select1Value;
if(simul2Value && simul2Value =='선택'){
alert("새로운 방을 생성해주세요.");
window.open(url+'/lms/bim/viewer'+param, '사무좌석 시스템')
}else if(simul2Value && simul2Value !='선택'){
param += '&simulMgmPk=';
param += simul2Value;
window.open(url+'/lms/bim/viewer'+param, '사무좌석 시스템')
}else {
window.open(url+'/lms/bim/viewer'+param, '사무좌석 시스템')
}
}
function getJsonData(url, data, sync) {
var resultData;
$.ajax({
url: '${pageContext.request.contextPath}'+url,
type: 'GET',
data: data,
dataType: 'json',
async: sync?true:false,
success: function(res) {
resultData = res.data;
},
error: function(data) {
console.log('jquery error : '+data.responseText);
}
});
return resultData;
}
</script>
<!-- 페이징 -->
<script type="text/javascript">
function pagination(f) {
$('.pagination').empty();
var req_num_row = 10; //게시글 화면 숫자
var $tr = jQuery('tbody tr');
var total_num_row = 0;
var searchIdMap = {};
//검색을 안했을떄
if(f == true){
var total_num_row = $tr.length;
//검색을했을떄
}else{
for(var i =0; i < $tr.length; i++){
var tr = $tr[i];
var display = $(tr).css("display");
if(display && display != "none"){
searchIdMap[i] = tr;
total_num_row ++;
}
}
}
var num_pages = 0;
if (total_num_row % req_num_row == 0 ) {
num_pages = total_num_row / req_num_row;
}
if (total_num_row % req_num_row >= 1) {
num_pages = total_num_row / req_num_row;
num_pages++;
num_pages = Math.floor(num_pages++);
}
jQuery('.pagination').append(
"<li><a class=\"prev\"> << </a></li>") ;
for (var i = 1; i <= num_pages; i++) {
jQuery('.pagination').append("<li><a>" + i + "</a></li>");
jQuery('.pagination li:nth-child(2)').addClass("active");
jQuery('.pagination a').addClass("pagination-link");
}
jQuery('.pagination').append("<li><a class=\"next\"> >> </a></li>");
if(f == true){
$tr.each(function(i) {
jQuery(this).hide();
if (i + 1 <= req_num_row) {
$tr.eq(i).show();
}
});
}else{
var cnt = 0;
jQuery($tr).hide();
for(var i in searchIdMap){
if(cnt == 10){
continue;
}
$tr.eq(i).show();
cnt++;
}
}
jQuery('.pagination a').click(
'.pagination-link',
function(e) {
e.preventDefault();
$tr.hide();
var page = jQuery(this).text();
if(page.trim() == '>>'){
page = num_pages;
}else if (page.trim() == '<<'){
page = 1;
}
var temp = page - 1;
var start = temp * req_num_row;
var current_link = temp;
jQuery('.pagination li').removeClass("active");
jQuery(this).parent().addClass("active");
//검색안했을떄.
if(f == true){
for (var i = 0; i < req_num_row; i++) {
$tr.eq(start + i).show();
}
//검색했을떄
}else{
var cnt = 0;
var isTrueCnt = 0
for(var i in searchIdMap){
if(isTrueCnt == 10){
continue;
}
if(start <= cnt){
$tr.eq(i).show();
isTrueCnt++;
}else{
cnt++;
}
/* if(cnt == 10){
continue;
} */
//$tr.eq(i).show();
}
}
if (temp >= 1) {
jQuery('.pagination li:first-child').removeClass(
"disabled");
} else {
jQuery('.pagination li:first-child').addClass(
"disabled");
}
});
jQuery('.prev').click(function(e) {
e.preventDefault();
jQuery('.pagination li:first-child').removeClass("active");
});
jQuery('.next').click(function(e) {
e.preventDefault();
jQuery('.pagination li:last-child').removeClass("active");
});
}
jQuery('document').ready(function() {
pagination(true);
jQuery('.pagination li:first-child').addClass("disabled");
});
</script>
<!-- 검색 -->
<script type="text/javascript">
function searchbutton() {
var searchbox = document.getElementById("searchbox"); //search_Group
var searchfor = searchbox.options[searchbox.selectedIndex].value; // search_Group 선택index번호
var msg = document.getElementById("search").value; // 검색TEXT
if(msg == ""){
pagination(true);
return;
}
$("table tr").each(function(index) {
if (!index)
return;
$(this).find("td").each(function(index) {
if(searchfor != 99 && this.cellIndex != searchfor){
return;
}
if(this.cellIndex > 1){
return;
}
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(msg) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
pagination(false);
}
</script>
</body>
</html>