CORD GUI -- Users page has a panel with information about what each category blocks.
Change-Id: I035dbc139656abcb9f918a3197dda39aa05a0757
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index a3848ee..e95d7b1 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -78,10 +78,6 @@
font-weight: lighter;
}
-div.container {
- min-height: 100%;
-}
-
button,
input[type="button"],
input[type="reset"] {
@@ -119,6 +115,7 @@
div.container {
width: 85%;
margin: 0 auto;
+ min-height: 100%;
}
div.main-left, div.main-right {
float: left;
@@ -141,6 +138,9 @@
g.icon use.glyph.checkMark {
fill: rgb(68, 189, 83)
}
+g.icon use.glyph.xMark {
+ fill: #CE5650;
+}
th.user-pic {
background-color: white;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/ratingPanel.html b/apps/demo/cord-gui/src/main/webapp/app/view/user/ratingPanel.html
new file mode 100644
index 0000000..04ee430
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/ratingPanel.html
@@ -0,0 +1,22 @@
+<!--Partial HTML for rating panel directive-->
+<div id="rating-panel">
+ <div ng-cloak class="ng-hide ng-cloak panel" ng-show="ratingsShown">
+ <table>
+ <tr>
+ <th class="title">Category</th>
+ <th ng-repeat="rating in level_order">{{rating}}</th>
+ </tr>
+ <tr ng-repeat="cat in category_order">
+ <td class="title">{{cat}}</td>
+ <td ng-repeat="r in level_order">
+ <div ng-if="prohibitedSites[r][cat]">
+ <icon size="15" id="xMark"></icon>
+ </div>
+ <div ng-if="!prohibitedSites[r][cat]">
+ <icon size="15" id="checkMark"></icon>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
index ad03110..8539238 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
@@ -46,6 +46,11 @@
padding: 2% 1%;
}
+#user span.help:hover {
+ cursor: pointer;
+ color: #CE5650;
+}
+
#user div.main-left.family table.user-info th,
#user div.main-right.family table.user-form th {
padding: 17px;
@@ -109,3 +114,67 @@
#user td.buttons svg {
vertical-align: middle;
}
+
+#rating-panel th,
+#rating-panel td {
+ text-align: center;
+ padding: 1%;
+ font-weight: lighter;
+}
+
+#rating-panel th.title,
+#rating-panel td.title {
+ width: 125px;
+ text-align: left;
+}
+
+#rating-panel th {
+ background-color: white;
+ padding-top: 3%;
+ border-bottom: 1px solid #CE5650;
+ color: #3C3C3C;
+ font-weight: normal;
+}
+
+#rating-panel tr th:first-child,
+#rating-panel tr td:first-child {
+ padding-left: 5%;
+}
+#rating-panel tr th:last-child,
+#rating-panel tr td:last-child {
+ padding-right: 5%;
+}
+
+div#rating-panel {
+ position: relative;
+ pointer-events: none;
+}
+
+#rating-panel div.ng-hide-add.ng-hide-add-active,
+#rating-panel div.ng-hide-remove.ng-hide-remove-active {
+ -webkit-transition: all linear 0.75s;
+ transition: all linear 0.75s;
+}
+
+#rating-panel div.panel {
+ position: absolute;
+ top: 0;
+ left: -6%;
+ height: 545px;
+ overflow: auto;
+ padding: 0;
+ pointer-events: auto;
+ box-shadow: 0 3px 23px 7px rgb(118, 118, 118);
+ border-radius: 3px;
+}
+#rating-panel table {
+ table-layout: fixed;
+ width: 500px;
+ background-color: white;
+ opacity: 1;
+}
+
+#rating-panel div.ng-hide {
+ opacity: 0;
+ left: -55%;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
index 089f5ff..d8a0620 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
@@ -23,7 +23,11 @@
name="changeLevels">
<table class="user-form">
<tr>
- <th>Select Site Rating</th>
+ <th>
+ Select Site Rating
+ <span class="help"
+ ng-click="showRatings()"> (?)</span>
+ </th>
</tr>
<tr ng-repeat="user in users" class="options">
<td>
@@ -49,5 +53,8 @@
</table>
</form>
</div>
+ <div ng-if="isFamily">
+ <ratings-panel></ratings-panel>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
index 76bf16a..bb44fec 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
@@ -30,6 +30,7 @@
$scope.isFamily = false;
$scope.newLevels = {};
$scope.showCheck = false;
+ $scope.ratingsShown = false;
// === Get data functions ---
@@ -112,7 +113,53 @@
$scope.showCheck = false;
};
+ $scope.showRatings = function () {
+ $scope.ratingsShown = !$scope.ratingsShown;
+ };
+
$log.debug('Cord User Ctrl has been created.');
+ }])
+
+ .directive('ratingsPanel', ['$log', function ($log) {
+ return {
+ templateUrl: 'app/view/user/ratingPanel.html',
+ link: function (scope, elem, attrs) {
+ function fillSubMap(order, bool) {
+ var result = {};
+ $.each(order, function (index, cat) {
+ result[cat] = bool;
+ });
+ return result;
+ }
+ function processSubMap(prhbSites) {
+ var result = {};
+ $.each(prhbSites, function (index, cat) {
+ result[cat] = true;
+ });
+ return result;
+ }
+
+ function preprocess(data, order) {
+ return {
+ ALL: fillSubMap(order, false),
+ G: processSubMap(data.G),
+ PG: processSubMap(data.PG),
+ PG_13: processSubMap(data.PG_13),
+ R: processSubMap(data.R),
+ NONE: fillSubMap(order, true)
+ };
+ }
+
+ $.getJSON('/app/data/pc_cats.json', function (data) {
+ scope.level_order = data.level_order;
+ scope.category_order = data.category_order;
+ scope.prohibitedSites = preprocess(
+ data.prohibited, data.category_order
+ );
+ scope.$apply();
+ });
+ }
+ };
}]);
}());