feat(*): set up UI
parent
f3703f423f
commit
2ebab66b13
@ -0,0 +1,62 @@
|
|||||||
|
angular.module('ngHintUI',[]);
|
||||||
|
|
||||||
|
angular.module('ngHintUI')
|
||||||
|
.controller('HintCtrl', ['$scope',
|
||||||
|
function($scope){
|
||||||
|
$scope.module, $scope.type, $scope.isEmpty = '';
|
||||||
|
|
||||||
|
//message data will be an array sent from hint log to batarang to here
|
||||||
|
$scope.messageData = {
|
||||||
|
'Modules': {
|
||||||
|
'Error-Messages': ['qwer$scope is a message', 'So issdfs $scope', 'Dont forget asdfsbout me too'],
|
||||||
|
'Warning-Messages': ['$scope is sdfa message', 'So iqws $scope', 'Dontasdf forget about me too'],
|
||||||
|
'Suggestion-Messages': ['$scope meerqessage', 'So is thsdgsis', 'Dont foasdfrget asdfabout me too'],
|
||||||
|
},
|
||||||
|
'Directives': {
|
||||||
|
'Error-Messages': ['rty$scope is asdfnot message', 'So ishggh $scope, not', 'Dont forgedfh abohkhut me too, jk'],
|
||||||
|
'Warning-Messages': ['$scope not mqweressage', 'So is $scope, not', 'Dont forget abfghfout me too, jk'],
|
||||||
|
'Suggestion-Messages': ['$scope is not masdessage', 'So is thiddfss, not', 'Dont forget abohmgut me too, jk'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.labels = ['All-Messages', 'Error-Messages', 'Warning-Messages', 'Suggestion-Messages'];
|
||||||
|
|
||||||
|
(function(self){
|
||||||
|
var all = {
|
||||||
|
'All-Messages': [],
|
||||||
|
'Error-Messages': [],
|
||||||
|
'Warning-Messages': [],
|
||||||
|
'Suggestion-Messages': []
|
||||||
|
};
|
||||||
|
for(var id in self.messageData) {
|
||||||
|
self.messageData[id]['All-Messages'] = [];
|
||||||
|
for(var type in self.messageData[id]) {
|
||||||
|
self.messageData[id][type].forEach(function(message) {
|
||||||
|
if(type !== 'All-Messages'){
|
||||||
|
all['All-Messages'].push({message: message, type: type, module: id});
|
||||||
|
all[type].push(message);
|
||||||
|
self.messageData[id]['All-Messages'].push({message: message, type: type});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.messageData['All'] = all;
|
||||||
|
})($scope);
|
||||||
|
|
||||||
|
$scope.dashesToSpace = function(str) {
|
||||||
|
return str.replace(/-/g,' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.setModule = function(module) {
|
||||||
|
$scope.module = module;
|
||||||
|
}
|
||||||
|
$scope.setType = function(type) {
|
||||||
|
$scope.isEmpty = '';
|
||||||
|
if($scope.messageData[$scope.module][type].length === 0) {
|
||||||
|
$scope.isEmpty = 'There are no messages in this category.';
|
||||||
|
}
|
||||||
|
$scope.type = type;
|
||||||
|
}
|
||||||
|
$scope.setModule('Directives');
|
||||||
|
$scope.setType('All-Messages');
|
||||||
|
}]);
|
@ -0,0 +1,7 @@
|
|||||||
|
.offsetTab{
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
.table-hover > tbody > tr:hover > td,
|
||||||
|
.table-hover > tbody > tr:hover > th {
|
||||||
|
background-color: #F3F3F3;
|
||||||
|
}
|
@ -0,0 +1,5 @@
|
|||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<script src="js/devtoolsBackground.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,72 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html ng-csp ng-app="ngHintUI">
|
||||||
|
<head>
|
||||||
|
<script src="bower_components/angular/angular.js"></script>
|
||||||
|
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
|
||||||
|
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||||
|
|
||||||
|
<script src="HintCtrl.js"></script>
|
||||||
|
|
||||||
|
<!--<script src="hint.js"></script>-->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="app.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div ng-controller="HintCtrl" >
|
||||||
|
<div class="row" style="padding:10px">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li ng-class="{active: module === modName}" ng-repeat="(modName, value) in messageData" ng-click="setModule(modName)">
|
||||||
|
<a data-toggle="tab">
|
||||||
|
{{modName}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="row" style="padding: 5px 0px">
|
||||||
|
<div class="col-md-2">
|
||||||
|
<ul class="nav nav-pills nav-stacked">
|
||||||
|
<li ng-class="{active: type === label}" ng-repeat="label in labels" ng-click="setType(label)">
|
||||||
|
<a class="offsetTab">
|
||||||
|
{{dashesToSpace(label)}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-10">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
|
||||||
|
<input class="form-control" type="text" placeholder="Search Messages" ng-model="search">
|
||||||
|
</div>
|
||||||
|
<table class="table table-striped table-hover" ng-show="messageData[module][type].length">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>No.</th>
|
||||||
|
<th ng-show="module === 'All' && type === 'All-Messages' ">Module</th>
|
||||||
|
<th>Message</th>
|
||||||
|
<th ng-show="type === 'All-Messages'">Type</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr ng-repeat="message in messageData[module][type]| filter:search"
|
||||||
|
ng-class="{danger: type === 'All-Messages' && message.type === 'Error-Messages',
|
||||||
|
warning: type === 'All-Messages' && message.type === 'Warning-Messages',
|
||||||
|
info: type === 'All-Messages' && message.type === 'Suggestion-Messages',}">
|
||||||
|
<td>{{$index+1}}</td>
|
||||||
|
<td ng-show="module === 'All' && type === 'All-Messages'">Hint {{message.module}}</td>
|
||||||
|
<td>{{message.message || message}}</td>
|
||||||
|
<td ng-show="type === 'All-Messages'">{{message.type.substring(0,message.type.indexOf('-'))}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div>
|
||||||
|
<h3 ng-bind="isEmpty"></h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,7 @@
|
|||||||
|
var panels = chrome.devtools.panels;
|
||||||
|
|
||||||
|
var angularPanel = panels.create(
|
||||||
|
"AngularJS",
|
||||||
|
"img/angular.png",
|
||||||
|
"hint.html"
|
||||||
|
);
|
Reference in New Issue