Refactoring of WANavigation and i,plementation of Service Status

This commit is contained in:
Ziver Koc 2015-07-24 15:15:38 +00:00
parent e201f9ce4c
commit b115a9cb4f
14 changed files with 101 additions and 91 deletions

View file

@ -1,7 +1,7 @@
<div class="col-md-12"><div class="panel panel-default">
<div class="panel-heading">Service Status</div>
<div class="panel-body">
<table class="table small hdd-detail">
<table class="table hdd-detail">
<thead><tr>
<th data-field="service">Service</th>
<th data-field="status">Status</th>
@ -9,14 +9,14 @@
</tr></thead>
{{#services}}
<tr>
<td>{{.name}}</td>
<td>{{.getName()}}</td>
<td>
{{#.isRunning()}}<span class="label label-success">Running</span>{{/.isRunning()}}
{{#.isUnresponsive()}}<span class="label label-warning">Unresponsive</span>{{/.isUnresponsive()}}
{{#.isStopped()}}<span class="label label-danger">Stopped</span>{{/.isStopped()}}
{{#.isUnknown()}}<span class="label label-default">Unknown</span>{{/.isUnknown()}}
</td>
<td><input type="checkbox" class="switch" checked></td>
<td><input type="checkbox" class="switch" data-size="mini" checked></td>
</tr>
{{/services}}
</table>

View file

@ -0,0 +1,111 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebAdmin</title>
<!-- CSS -->
<link href="css/magic-bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-switch.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!-- Javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/bootstrap-switch.min.js"></script>
<script>
$(function() {
$(".switch[type='checkbox']").bootstrapSwitch();
});
</script>
</head>
<body>
<!-- Top Bar -->
<nav id="top-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<a class="navbar-brand" href="#">{{title}}</a>
<ul class="nav navbar-nav">
{{#top-nav}}
{{^.subNav.length}}
<li><a href="{{.url}}">{{.name}}</a></li>
{{/.subNav.length}}
{{#.subNav.length}}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
{{#.subNav}}
<li><a href="{{.url}}">{{.name}}</a></li>
{{/.subNav}}
</ul>
</li>
{{/.subNav.length}}
{{/top-nav}}
</ul>
</nav>
<div>
<!-- Side Bar -->
{{#side-nav-show}}
<div id="side-bar" class="col-md-2">
<ul class="side-menu nav nav-pills nav-stacked">
{{#side-nav}}
{{^.subNavs.length}}
<li><a href="{{.url}}">{{.name}}</a></li>
{{/.subNavs.length}}
{{#.subNav.length}}
<li class="">
<a data-toggle="collapse" data-parent="#side-bar" href="#{{.name}}_collapse">
{{.name}} <b class="caret"></b>
</a>
<ul id="{{.name}}_collapse" class="side-sub-menu collapse nav nav-pills nav-stacked ">
{{#.subNavs}}
<li><a href="{{.url}}">{{.name}}</a></li>
{{/.subNavs}}
</ul>
</li>
{{/.subNav.length}}
{{/side-nav}}
</ul>
</div>
{{/side-nav-show}}
<!-- Main Container -->
<div class="col-md-10">
<!-- Page specific info -->
<div class="row">
<ol class="breadcrumb">
{{#breadcrumb}}
<li><a href="{{.url}}">{{.name}}</a></li>
{{/breadcrumb}}
</ol>
</div>
<!-- Alerts -->
<div class="alert-container">
{{#alerts}}
<div class="alert alert-dismissable alert-{{.type}}">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{{.message}}
</div>
{{/alerts}}
</div>
<div class="container">
{{content}}
</div>
</div>
</div>
<!--<footer class="footer">
<div class="container">
<p class="text-muted">{{footer}}</p>
</div>
</footer>-->
</body>
</html>

View file

@ -0,0 +1,89 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebAdmin</title>
<!-- Bootstrap -->
<link href="css/magic-bootstrap.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- Top Bar -->
<nav id="top-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<a class="navbar-brand" href="#">WebAdmin</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Status</a></li>
<li class=""><a href="#">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Webadmin<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Users</a></li>
<li><a href="#">Config</a></li>
<li class="divider"></li>
<li><a href="#">Server</a></li>
</ul>
</li>
</ul>
</nav>
<div>
<!-- Side Bar -->
<div id="side-bar" class="col-md-2">
<ul class="side-menu nav nav-pills nav-stacked">
<li class="active"><a href="#">Link1</a></li>
<li class=""><a href="#">Link2</a></li>
<li class="">
<a data-toggle="collapse" data-parent="#side-bar" href="#link3-sub-menu">
Link3 <span class="caret pull-right"></span>
</a>
<ul id="link3-sub-menu" class="side-sub-menu collapse nav nav-pills nav-stacked ">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- Main Container -->
<div class="col-md-10">
<!-- Page specific info -->
<div class="row">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
<!-- Alerts -->
<div class="alert-container">
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
<div id="container">
Content
</div>
</div>
</div>
<!--<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>