feat(*): set up UI
Carlo s A. Guillen
10 years ago
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