|
- <!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">
- Gruppe 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">
- Gruppe 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">
- Gruppe 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">
- Gruppe 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>
|