From 93f0cf50638b4d372b52e09a6b8cf1b8f55c2bc8 Mon Sep 17 00:00:00 2001
From: Jaden Diefenbaugh <blakcap@users.noreply.github.com>
Date: Thu, 2 Mar 2017 15:09:22 +0100
Subject: [PATCH] add prototype view serialized data, add drag handles
---
.../app/directives/groupItemContainer.js | 67 ++++++++++++-------
.../reports/app/directives/groupPanelItems.js | 5 +-
.../reports/app/directives/groupPlotItem.js | 14 ++--
.../reports/app/directives/groupTableItem.js | 7 +-
.../reports/app/directives/groupTextItem.js | 23 ++++---
.../app/directives/groupViewSerialized.js | 42 ++++++++++++
.../reports/app/directives/groupsLayout.js | 5 +-
.../web/reports/templates/reports/report.html | 1 +
8 files changed, 121 insertions(+), 43 deletions(-)
create mode 100644 beat/web/reports/static/reports/app/directives/groupViewSerialized.js
diff --git a/beat/web/reports/static/reports/app/directives/groupItemContainer.js b/beat/web/reports/static/reports/app/directives/groupItemContainer.js
index 012be32a7..e66a4e73a 100644
--- a/beat/web/reports/static/reports/app/directives/groupItemContainer.js
+++ b/beat/web/reports/static/reports/app/directives/groupItemContainer.js
@@ -35,34 +35,49 @@ angular.module('reportApp')
link: function(scope){
scope.item = scope.reportItem;
scope.domId = `${scope.group.name}_${scope.id}`;
+ scope.showSerialized = { val: true };
},
template: `
-<div
- group-table-item
- ng-if="item.id.includes('table')"
- class='panel panel-default'
- group='group'
- id='item.id'
- fields='item.content'
- >
-</div>
-<div
- group-plot-item
- ng-if="item.id.includes('plot')"
- class='panel panel-default'
- group='group'
- id='item.id'
- content='item.content'
- >
-</div>
-<div
- group-text-item
- ng-if="item.id.includes('text')"
- class='panel panel-default'
- group='group'
- report-item='item'
- >
+<div class='row'>
+ <div ng-class="{'col-md-6': showSerialized.val, 'col-md-12': !showSerialized.val}">
+ <div
+ group-table-item
+ ng-if="item.id.includes('table')"
+ class='panel panel-default'
+ group='group'
+ id='item.id'
+ show-serialized='showSerialized'
+ fields='item.content'
+ >
+ </div>
+ <div
+ group-plot-item
+ ng-if="item.id.includes('plot')"
+ class='panel panel-default'
+ group='group'
+ id='item.id'
+ show-serialized='showSerialized'
+ content='item.content'
+ >
+ </div>
+ <div
+ group-text-item
+ ng-if="item.id.includes('text')"
+ class='panel panel-default'
+ group='group'
+ show-serialized='showSerialized'
+ report-item='item'
+ >
+ </div>
+ </div>
+ <div
+ group-view-serialized
+ ng-if='showSerialized.val'
+ class='col-md-6'
+ entity='fields'
+ >
+ </div>
</div>
`
- }
+ };
}]);
diff --git a/beat/web/reports/static/reports/app/directives/groupPanelItems.js b/beat/web/reports/static/reports/app/directives/groupPanelItems.js
index e94a25dce..469c7fe9f 100644
--- a/beat/web/reports/static/reports/app/directives/groupPanelItems.js
+++ b/beat/web/reports/static/reports/app/directives/groupPanelItems.js
@@ -31,6 +31,9 @@ angular.module('reportApp').directive("groupPanelItems", [function(){
group: '='
},
link: function(scope){
+ scope.sortableOptions = {
+ handle: '.panel-heading'
+ };
},
template: `
<div id="{{group.name}}-itemlist-heading" class="panel-heading" role="tab">
@@ -57,7 +60,7 @@ angular.module('reportApp').directive("groupPanelItems", [function(){
role="tabpanel"
aria-labelledby="{{group.name}}-itemlist-heading">
<div class="panel-body">
- <div ui-sortable ng-model='group._reportItems' class='panel-group'>
+ <div ui-sortable='sortableOptions' ng-model='group._reportItems' class='panel-group'>
<div
group-item-container
ng-repeat='item in group.reportItems'
diff --git a/beat/web/reports/static/reports/app/directives/groupPlotItem.js b/beat/web/reports/static/reports/app/directives/groupPlotItem.js
index 7681ff63e..01e727ad5 100644
--- a/beat/web/reports/static/reports/app/directives/groupPlotItem.js
+++ b/beat/web/reports/static/reports/app/directives/groupPlotItem.js
@@ -31,7 +31,8 @@ angular.module('reportApp')
scope: {
group: '=',
id: '=',
- content: '='
+ content: '=',
+ showSerialized: '='
},
link: function(scope){
scope.domId = `${scope.group.name}_${scope.id}`;
@@ -54,10 +55,13 @@ angular.module('reportApp')
<button class='btn btn-default' ng-click='hardRefresh()'>
<span class='glyphicon glyphicon-refresh'></span>
</button>
- <button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
- Delete Plot
- </button
+ <button class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
+ Toggle Serialize View
+ </button>
</div>
+ <button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
+ Delete Plot
+ </button
</h4>
</div>
<div id="collapse-{{domId}}"
@@ -67,5 +71,5 @@ angular.module('reportApp')
{{ id }} content
</div>
`
- }
+ };
}]);
diff --git a/beat/web/reports/static/reports/app/directives/groupTableItem.js b/beat/web/reports/static/reports/app/directives/groupTableItem.js
index 049f8857b..10853e565 100644
--- a/beat/web/reports/static/reports/app/directives/groupTableItem.js
+++ b/beat/web/reports/static/reports/app/directives/groupTableItem.js
@@ -31,7 +31,8 @@ angular.module('reportApp')
scope: {
group: '=',
id: '=',
- fields: '='
+ fields: '=',
+ showSerialized: '='
},
link: function(scope){
// add 'expName' to the beginning of the fields to show in the table
@@ -113,6 +114,7 @@ angular.module('reportApp')
scope.domId = `${scope.group.name}_${scope.id}`;
scope.colSelectorId = `${scope.domId}_columnSelector`;
+
},
template: `
<div id="{{domId}}-heading" class="panel-heading" role="tab">
@@ -142,6 +144,9 @@ angular.module('reportApp')
button-text="Save Column Choices"
>
</div>
+ <button class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
+ Toggle Serialize View
+ </button>
</div>
<button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
Delete Table
diff --git a/beat/web/reports/static/reports/app/directives/groupTextItem.js b/beat/web/reports/static/reports/app/directives/groupTextItem.js
index ce5ba663d..bc3656669 100644
--- a/beat/web/reports/static/reports/app/directives/groupTextItem.js
+++ b/beat/web/reports/static/reports/app/directives/groupTextItem.js
@@ -30,7 +30,8 @@ angular.module('reportApp')
return {
scope: {
group: '=',
- reportItem: '='
+ reportItem: '=',
+ showSerialized: '='
},
link: function(scope){
scope.item = scope.reportItem;
@@ -71,6 +72,7 @@ angular.module('reportApp')
);
scope.saveContent = () => {
+ console.log(scope.hasUnsavedContent);
let newContent = scope.editor.getContents();
scope.hasUnsavedContent.val = false;
scope.item.content = newContent;
@@ -89,16 +91,19 @@ angular.module('reportApp')
aria-controls="collapse-{{domId}}">
{{ domId }}
</a>
- <button class='btn btn-success' ng-click='saveContent()'>
- Save Content
- </button>
-
<div class="btn-group" role="group" role='tab'>
- <button class='btn btn-danger' ng-click='group.removeReportItem(item.id)'>
- Delete Text Block
- </button
+ <button class='btn btn-success' ng-click='saveContent()'>
+ Save Content
+ </button>
+ <button class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
+ Toggle Serialize View
+ </button>
</div>
- <div ng-if='hasUnsavedContent.val'>
+
+ <button class='btn btn-danger' ng-click='group.removeReportItem(item.id)'>
+ Delete Text Block
+ </button
+ <div ng-if='hasUnsavedContent.val === true'>
<strong>Warning:</strong> Press the 'Save Content' button to save changes.
</div>
</h4>
diff --git a/beat/web/reports/static/reports/app/directives/groupViewSerialized.js b/beat/web/reports/static/reports/app/directives/groupViewSerialized.js
new file mode 100644
index 000000000..6a0dce037
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/groupViewSerialized.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+/*
+ * groupViewSerialized
+ * Desc:
+ * displays a plot report item
+ */
+angular.module('reportApp')
+.directive("groupViewSerialized", [function(){
+ return {
+ scope: {
+ entity: '='
+ },
+ link: function(scope, el){
+ },
+ template: `
+<div class='well'>
+{{ entity }}
+</div>
+`
+ };
+}]);
diff --git a/beat/web/reports/static/reports/app/directives/groupsLayout.js b/beat/web/reports/static/reports/app/directives/groupsLayout.js
index 5c59041a4..97ff74cbd 100644
--- a/beat/web/reports/static/reports/app/directives/groupsLayout.js
+++ b/beat/web/reports/static/reports/app/directives/groupsLayout.js
@@ -34,9 +34,12 @@ angular.module('reportApp').directive("groupsLayout", ['GroupsService', function
link: function(scope, el, attr){
scope.groups = GroupsService.groups;
scope.GroupsService = GroupsService;
+ scope.sortableOptions = {
+ handle: '> .panel-heading'
+ };
},
template: `
-<div ui-sortable ng-model='GroupsService.groups' id='groupsLayout' class='panel-group'>
+<div ui-sortable='sortableOptions' ng-model='GroupsService.groups' id='groupsLayout' class='panel-group'>
<div
group-panel-content
class='panel panel-default'
diff --git a/beat/web/reports/templates/reports/report.html b/beat/web/reports/templates/reports/report.html
index fda86cf0c..f62b21cfe 100644
--- a/beat/web/reports/templates/reports/report.html
+++ b/beat/web/reports/templates/reports/report.html
@@ -120,6 +120,7 @@
<script src="{% fingerprint "reports/app/directives/groupTextItem.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% fingerprint "reports/app/directives/groupTableFieldSelector.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% fingerprint "reports/app/directives/groupPanelAliases.js" %}" type="text/javascript" charset="utf-8"></script>
+ <script src="{% fingerprint "reports/app/directives/groupViewSerialized.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% fingerprint "ui/js/smartselector.js" %}" type="text/javascript" charset="utf-8"></script>
--
GitLab