refactor(hintApp): simplify app
parent
f1b460e45a
commit
6911e08b73
@ -1,91 +1,92 @@
|
||||
<!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>
|
||||
<head>
|
||||
<link rel="stylesheet" href="bower_components/angular/angular-csp.css">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
||||
<script src="hintApp.js"></script>
|
||||
<script src="hintService.js"></script>
|
||||
<script src="hintCtrl.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="bower_components/angular/angular-csp.css">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div ng-controller="HintController" >
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<div ng-controller="HintController">
|
||||
<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">{{label}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div ng-show="suppressedMessagesLength">
|
||||
<hr>
|
||||
<h5 class="offsetTab">Suppressed Errors:</h5>
|
||||
<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">
|
||||
{{label}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div ng-show="suppressedMessagesLength">
|
||||
<hr>
|
||||
<h5 class="offsetTab">Suppressed Errors:</h5>
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li ng-repeat="(key,message) in suppressedMessages">
|
||||
<div class="suppressedMessage">
|
||||
<div class='alert alert-warning condenseAlert'>
|
||||
<li ng-repeat="(key,message) in suppressedMessages">
|
||||
<div class="suppressedMessage">
|
||||
<div class='alert alert-warning condenseAlert'>
|
||||
{{message}}
|
||||
<button type="button" class="close" style="margin-top:-5px" ng-click="unsuppressMessage(key)"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="close" style="margin-top:-5px" ng-click="unsuppressMessage(key)">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<th>Suppress</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'}"
|
||||
ng-hide="isSuppressed(message.message)">
|
||||
<td>{{$index+1}}</td>
|
||||
<td ng-show="module === 'All' && type === 'All Messages'">{{message.module}}</td>
|
||||
<td>{{message.message || message}}</td>
|
||||
<td ng-show="type === 'All Messages'">{{message.type.split(' ')[0]}}</td>
|
||||
<td align="center"><button type="button" class="btn btn-default btn-xs" ng-click="suppressMessage(message.message)"><span class="glyphicon glyphicon-minus-sign"></span></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div ng-show="!messageData[module][type].length">
|
||||
<h3>There are no messages in this category.</h3>
|
||||
</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>
|
||||
<th>Suppress</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'}"
|
||||
ng-hide="isSuppressed(message.message)">
|
||||
<td>{{$index + 1}}</td>
|
||||
<td ng-show="module === 'All' && type === 'All Messages'">{{message.module}}</td>
|
||||
<td>{{message.message || message}}</td>
|
||||
<td ng-show="type === 'All Messages'">{{ message.type.split(' ')[0] }}</td>
|
||||
<td align="center"><button type="button" class="btn btn-default btn-xs" ng-click="suppressMessage(message.message)"><span class="glyphicon glyphicon-minus-sign"></span></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div ng-show="!messageData[module][type].length">
|
||||
<h3>There are no messages in this category.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<!-- scripts -->
|
||||
<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="hintApp.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1 +1,134 @@
|
||||
angular.module('ngHintUI',[]);
|
||||
angular.module('ngHintUI', []).
|
||||
|
||||
controller('HintController', ['$scope', 'hintService',
|
||||
function($scope, hintService) {
|
||||
|
||||
//Set the hint service to perform this action when the page is refreshed
|
||||
hintService.onRefresh(function() {
|
||||
$scope.messageData = {
|
||||
'All' : {
|
||||
'Error Messages': [],
|
||||
'Warning Messages': [],
|
||||
'Suggestion Messages': [],
|
||||
'All Messages': []
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
//Set the hint service to perform this action whenever
|
||||
//a new hint message is received.
|
||||
hintService.onHint(function(msg) {
|
||||
//If there is no scope data, initialize a new data object
|
||||
$scope.messageData = $scope.messageData || {
|
||||
'All' : {
|
||||
'Error Messages': [],
|
||||
'Warning Messages': [],
|
||||
'Suggestion Messages': [],
|
||||
'All Messages': []
|
||||
}
|
||||
};
|
||||
|
||||
// Split the hint message into useful information
|
||||
var result = msg.split('##'),
|
||||
modName = result[0],
|
||||
message = result[1],
|
||||
messageType = result[2];
|
||||
|
||||
//If there are no messages for this module, make new arrays for this module's messages
|
||||
if(!$scope.messageData[modName]) {
|
||||
$scope.messageData[modName] = {
|
||||
'Error Messages': [],
|
||||
'Warning Messages': [],
|
||||
'Suggestion Messages': [],
|
||||
'All Messages': []
|
||||
};
|
||||
}
|
||||
|
||||
$scope.messageData['All']['All Messages'].push({
|
||||
message: message,
|
||||
type: messageType,
|
||||
module: modName
|
||||
});
|
||||
|
||||
if(!$scope.messageData['All'][messageType]) {
|
||||
$scope.messageData['All'][messageType] = [];
|
||||
}
|
||||
$scope.messageData['All'][messageType].push(message);
|
||||
$scope.messageData[modName]['All Messages'].push({message: message, type: messageType});
|
||||
$scope.messageData[modName][messageType].push(message);
|
||||
});
|
||||
|
||||
$scope.suppressedMessages = {};
|
||||
$scope.suppressedMessagesLength = 0;
|
||||
|
||||
$scope.labels = ['All Messages', 'Error Messages', 'Warning Messages', 'Suggestion Messages'];
|
||||
|
||||
$scope.setModule = function(module) {
|
||||
$scope.module = module;
|
||||
};
|
||||
|
||||
$scope.setType = function(type) {
|
||||
$scope.type = type;
|
||||
};
|
||||
|
||||
$scope.setModule('All');
|
||||
$scope.setType('All Messages');
|
||||
|
||||
$scope.isSuppressed = function(message) {
|
||||
message = message.split(' ').slice(6,9).join('');
|
||||
return message in $scope.suppressedMessages;
|
||||
};
|
||||
|
||||
$scope.suppressMessage = function(message) {
|
||||
$scope.suppressedMessagesLength++;
|
||||
|
||||
var key = message.split(' ').slice(6,9).join('');
|
||||
var secondSpace = message.indexOf(' ', message.indexOf(' '));
|
||||
var endInd = 60;
|
||||
while(message.charAt(endInd) !== ' ') {
|
||||
endInd++;
|
||||
if(endInd > 75) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
$scope.suppressedMessages[key] = '...' + message.substr(secondSpace+1,endInd) + '...';
|
||||
};
|
||||
|
||||
$scope.unsuppressMessage = function(messageKey) {
|
||||
$scope.suppressedMessagesLength--;
|
||||
|
||||
delete $scope.suppressedMessages[messageKey];
|
||||
};
|
||||
|
||||
}]).
|
||||
|
||||
service('hintService', ['$rootScope', function($rootScope) {
|
||||
var onHintCallback,
|
||||
onRefreshCallback;
|
||||
|
||||
this.onHint = function(cb) {
|
||||
onHintCallback = cb;
|
||||
};
|
||||
|
||||
this.onRefresh = function(cb) {
|
||||
onRefreshCallback = cb;
|
||||
};
|
||||
|
||||
var port = chrome.extension.connect();
|
||||
port.postMessage(chrome.devtools.inspectedWindow.tabId);
|
||||
port.onMessage.addListener(function(msg) {
|
||||
$rootScope.$apply(function () {
|
||||
if (msg === 'refresh') {
|
||||
onRefreshCallback();
|
||||
} else {
|
||||
onHintCallback(msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
port.onDisconnect.addListener(function (a) {
|
||||
console.log(a);
|
||||
});
|
||||
|
||||
}]);
|
||||
|
||||
|
@ -1,90 +0,0 @@
|
||||
angular.module('ngHintUI')
|
||||
.controller('HintController', ['$scope', 'hintService',
|
||||
function($scope, hintService) {
|
||||
|
||||
//Set the hint service to perform this action when the page is refreshed
|
||||
hintService.setRefreshFunction(function() {
|
||||
$scope.messageData = {
|
||||
'All' : {
|
||||
'Error Messages': [],
|
||||
'Warning Messages': [],
|
||||
'Suggestion Messages': [],
|
||||
'All Messages': []
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
//Set the hint service to perform this action whenever
|
||||
//a new hint message is received.
|
||||
hintService.setHintFunction(function(msg) {
|
||||
//If there is no scope data, initialize a new data object
|
||||
$scope.messageData = $scope.messageData || {
|
||||
'All' : {
|
||||
'Error Messages': [],
|
||||
'Warning Messages': [],
|
||||
'Suggestion Messages': [],
|
||||
'All Messages': []
|
||||
}
|
||||
};
|
||||
|
||||
//Split the hint message into useful information
|
||||
var result = msg.split('##'),
|
||||
modName = result[0],
|
||||
message = result[1],
|
||||
messageType = result[2];
|
||||
|
||||
//If there are no messages for this module, make new arrays for this module's messages
|
||||
if(!$scope.messageData[modName]) {
|
||||
$scope.messageData[modName] = {
|
||||
'Error Messages': [],
|
||||
'Warning Messages': [],
|
||||
'Suggestion Messages': [],
|
||||
'All Messages': []
|
||||
};
|
||||
}
|
||||
|
||||
$scope.messageData['All']['All Messages'].push({message: message, type: messageType, module: modName});
|
||||
$scope.messageData['All'][messageType].push(message);
|
||||
$scope.messageData[modName]['All Messages'].push({message: message, type: messageType});
|
||||
$scope.messageData[modName][messageType].push(message);
|
||||
$scope.$apply();
|
||||
});
|
||||
|
||||
$scope.module, $scope.type, $scope.suppressedMessages = {}, $scope.suppressedMessagesLength = 0;
|
||||
$scope.labels = ['All Messages', 'Error Messages', 'Warning Messages', 'Suggestion Messages'];
|
||||
|
||||
$scope.setModule = function(module) {
|
||||
$scope.module = module;
|
||||
};
|
||||
|
||||
$scope.setType = function(type) {
|
||||
$scope.type = type;
|
||||
};
|
||||
|
||||
$scope.setModule('All');
|
||||
$scope.setType('All Messages');
|
||||
|
||||
$scope.isSuppressed = function(message) {
|
||||
message = message.split(' ').slice(6,9).join('');
|
||||
return message in $scope.suppressedMessages;
|
||||
};
|
||||
|
||||
$scope.suppressMessage = function(message) {
|
||||
$scope.suppressedMessagesLength++;
|
||||
var key = message.split(' ').slice(6,9).join('');
|
||||
var secondSpace = message.indexOf(' ', message.indexOf(' '));
|
||||
var endInd = 60;
|
||||
while(message.charAt(endInd) !== ' ') {
|
||||
endInd++;
|
||||
if(endInd > 75) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
$scope.suppressedMessages[key] = '...'+message.substring(secondSpace+1,endInd)+'...';
|
||||
};
|
||||
|
||||
$scope.unsuppressMessage = function(messageKey) {
|
||||
$scope.suppressedMessagesLength--;
|
||||
delete $scope.suppressedMessages[messageKey];
|
||||
}
|
||||
}]);
|
@ -1,30 +0,0 @@
|
||||
angular.module('ngHintUI').
|
||||
service('hintService', function() {
|
||||
var onHintFunction, onRefreshFunction;
|
||||
|
||||
this.setHintFunction = function(hintFunction) {
|
||||
onHintFunction = hintFunction;
|
||||
}
|
||||
|
||||
this.getHintFunction = function() {
|
||||
return onHintFunction;
|
||||
}
|
||||
|
||||
this.setRefreshFunction = function(refreshFunction) {
|
||||
onRefreshFunction = refreshFunction;
|
||||
}
|
||||
|
||||
this.getRefreshFunction = function() {
|
||||
return onRefreshFunction;
|
||||
}
|
||||
|
||||
var port = chrome.extension.connect();
|
||||
port.postMessage(chrome.devtools.inspectedWindow.tabId);
|
||||
port.onMessage.addListener(function(msg) {
|
||||
msg == 'refresh' ? onRefreshFunction() : onHintFunction(msg);
|
||||
});
|
||||
|
||||
port.onDisconnect.addListener(function (a) {
|
||||
console.log(a);
|
||||
});
|
||||
});
|
Reference in New Issue