192 lines
6.5 KiB
HTML
192 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>css control</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
</head>
|
|
<body>
|
|
<script src="http://code.jquery.com/jquery.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
var counter = 0;
|
|
var state = 'stop';
|
|
|
|
function clickHandler(value, item) {
|
|
if(value == 'up'){
|
|
test = "mc.html?IO1=up,target=" + item;
|
|
$.post( "mc.html?action=up&port=" + item );
|
|
}
|
|
if(value == 'stop'){
|
|
$.post( "mc.html?action=stop&port=" + item );
|
|
asyncLoop()
|
|
}
|
|
if(value == 'down'){
|
|
$.post( "mc.html?action=down&port=" + item );
|
|
}
|
|
state = value
|
|
// GetStatesFromServer()
|
|
}
|
|
|
|
(function GetStatesFromServer() {
|
|
$.get("cmd",function(retv){
|
|
|
|
state = retv
|
|
|
|
states = retv.split(",")
|
|
|
|
element0 = document.getElementById('progressBar_0')
|
|
element0.innerHTML = "<span>" + states[0] + "%" + "</span>"
|
|
element0.style.width=states[0]+"%"
|
|
|
|
element1 = document.getElementById('progressBar_1')
|
|
element1.innerHTML = "<span>" + states[1] + "%" + "</span>"
|
|
element1.style.width=states[1]+"%"
|
|
|
|
element2 = document.getElementById('progressBar_2')
|
|
element2.innerHTML = "<span>" + states[2] + "%" + "</span>"
|
|
element2.style.width=states[2]+"%"
|
|
|
|
element3 = document.getElementById('progressBar_3')
|
|
element3.innerHTML = "<span>" + states[3] + "%" + "</span>"
|
|
element3.style.width=states[3]+"%"
|
|
|
|
setTimeout(GetStatesFromServer, 1000);
|
|
})
|
|
|
|
})()
|
|
|
|
</script>
|
|
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li ><a href="index.html" >Home </a></li>
|
|
<li class="active" ><a href="mc.html" >Control </a></li>
|
|
<li ><a href="info.html" >Info </a></li>
|
|
</ul>
|
|
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
|
Alex 1
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseOne" class="panel-collapse collapse in">
|
|
|
|
<!-- bgn Button group 1 -->
|
|
<div class="panel-body" >
|
|
<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',0)" > Down </button>
|
|
<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',0)" > Stop </button>
|
|
<button type="button" class="btn btn-default" name="up" onclick="clickHandler('up',0)" > Up </button>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div id="progressBar_0" class="progress-bar" role="progressbar" style="width: 0%;">
|
|
<span> 0% Complete </span>
|
|
</div>
|
|
</div>
|
|
<!-- end Button group 1 -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
|
Alex 2
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseTwo" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
|
|
<!-- bgn Button group 2 -->
|
|
<div class="panel-body" >
|
|
<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',1)" > Down </button>
|
|
<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',1)" > Stop </button>
|
|
<button type="button" class="btn btn-default" name="up" onclick="clickHandler('up',1)" > Up </button>
|
|
</div>
|
|
|
|
|
|
<div class="progress">
|
|
<div id="progressBar_1" class="progress-bar" role="progressbar" style="width: 0%;">
|
|
<span> 0% Complete </span>
|
|
</div>
|
|
</div>
|
|
<!-- end Button group 2 -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
|
|
Linus 3
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
|
|
<div id="collapseThree" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
|
|
<!-- bgn Button group 3 -->
|
|
<div class="panel-body" >
|
|
<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',2)" > Down </button>
|
|
<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',2)" > Stop </button>
|
|
<button type="button" class="btn btn-default" name="up" onclick="clickHandler('up',2)" > Up </button>
|
|
</div>
|
|
|
|
|
|
<div class="progress">
|
|
<div id="progressBar_2" class="progress-bar" role="progressbar" style="width: 0%;">
|
|
<span> 0% Complete </span>
|
|
</div>
|
|
</div>
|
|
<!-- end Button group 3 -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
|
|
Linus 4
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseFour" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
|
|
<!-- bgn Button group 4 -->
|
|
<div class="panel-body" >
|
|
<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',3)" > Down </button>
|
|
<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',3)" > Stop </button>
|
|
<button type="button" class="btn btn-default" name="up" onclick="clickHandler('up',3)" > Up </button>
|
|
</div>
|
|
|
|
|
|
<div class="progress">
|
|
<div id="progressBar_3" class="progress-bar" role="progressbar" style="width: 0%;">
|
|
<span> 0% Complete </span>
|
|
</div>
|
|
</div>
|
|
<!-- end Button group 4 -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |